JavaScript动作监听器

Question

我通常实现选择框的方式是：

 <select size="1" name="example_length" onchange="callSomeMethod">
    <option value="10" selected="selected">10</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="100">100</option>
  </select>

我已附加onclick事件的操作

还有另一种方法check the dropdown source here

  <select size="1" name="example_length">
    <option value="10" selected="selected">10</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="100">100</option>
  </select>

在第二个实现中，尚不清楚在onchange事件上注册了什么操作

问题：在第二种实现中，我们通常使用一些Javascript库来注册动作，但是我觉得第一种实现是清晰，易读且易于调试的，而第二种实现让我有些困惑，所以，为什么我们使用第二种方法以及如何对此进行调试？

关于此的任何链接将不胜感激。

Answer 1

我发现将代码与HTML标记分开保持更清晰。当处理程序应用于页面上的多个元素时，尤其如此。当我可以转到代码中的单个位置（可以包含在可以在多个页面中重复使用的脚本中）并进行更改（而不是在整个代码中进行搜索和生成）时，这将实现更简洁的实现。可能对许多单个元素进行了更改，以反映功能的微小变化。

此外，我认为，当代码没有插入标记时，可以更轻松地调试代码。使用Firebug或IE Developer工具，您可以在javascript代码中设置断点，检查值并单步执行代码以查找任何错误。在另一种极端情况下，将整个函数放入应用了标记的点击处理程序中基本上无法进行调试。您已经通过引入一个称为的独立功能迈出了第一步。通过代码应用处理程序也可以通过调试该处理程序功能的应用程序来改善这一点。

另一个好处是，这很微妙，因为分别应用处理程序会迫使您使用更好的语义和命名约定。如您所见，一个缺点是，当代码为内联时，更容易查看检查正在应用哪些处理程序。通过代码应用它们时，您必须使用更好的语义，使用有意义的类名称来装饰受影响的元素，使用良好的描述性元素和函数名称，并将其重构为可重用的代码组件（以充分利用）。这看似不利，实际上有助于迫使您编写更好，更可维护的标记和javascript。

Answer 2

第二种方法是一种将关注区域分开的方法。网页关注的三个方面是表示，结构和功能。 CSS处理演示文稿。 HTML处理结构。 Javascript处理功能。

某些地方的某些Javascript代码将注册下拉列表所需的功能，因此HTML仅与结构有关；那是一个下拉列表。