JavaScript Action 监听器

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 事件上附加了一个 Action

还有一种方法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 事件上注册了什么 Action

问题:在第二种实现中，我们通常使用一些Javascript库来注册 Action ，但我觉得第一种实现清晰易读，更容易调试，而第二种实现让我有点困惑，所以，为什么我们使用第二种方法以及如何调试它？

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

Answer 1

我发现将代码与 HTML 标记分开会更清晰。当处理程序应用于页面上的多个元素时尤其如此。当我可以转到代码中的一个位置时(它可能包含在一个可以在多个页面中重复使用的脚本中)并进行更改，而不是必须在整个代码中搜索并进行更改，它会实现更清晰的实现可能会更改许多单独的元素以反射(reflect)功能中的微小变化。

此外，我认为当代码不穿插标记时，调试起来会更容易。使用 Firebug 或 IE Developer 工具，您可以在 javascript 代码中设置断点，检查值并单步执行代码以查找任何错误。在另一个极端，将整个函数放入标记应用的点击处理程序中，基本上无法进行调试。通过引入一个单独的调用函数，您已经朝着缓解这一问题迈出了一步。通过代码应用处理程序通过允许调试该处理程序函数的应用程序来改进这一点。

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