JavaScript操作听众

我通常实现一个选择框的方法是：JavaScript操作听众

<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库来注册这些动作，但是我觉得第一个实现是清晰的，可读的并且更容易调试，而第二个实现有点令我费解，所以，我们为什么要使用第二种方法以及如何调试？

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

来源

2011-11-22 dpsdce

第二个似乎是利用jQuery和一个名为dataTables的库（它不仅仅是简单地将onChange事件绑定到选择列表） –

@Drav我知道jquery或datatables库是绑定事件，但问题是如何它是否在第一个实现中得分，因为我觉得第一种方法更具可读性且更易于调试。那么有什么样的规范/最佳实践，哪一个可以使用，为什么？ – dpsdce

我发现它更清晰，让我的代码与我的HTML标记分开。当处理程序应用于页面上的多个元素时，尤其如此。当我可以访问代码中的单个地方时（这可能包含在可以重复使用多个页面的脚本中）并进行更改，而不必在整个代码中进行搜索并使其可能会改变许多单个元素以反映功能的小变化。

此外，我认为当代码不穿插标记时，它更容易调试代码。使用Firebug或IE开发人员工具，您可以在JavaScript代码中设置断点，检查值并遍历代码以查找任何错误。另一个极端是，将整个函数放入标记应用的点击处理程序中使得基本上不可能进行调试。通过引入一个被调用的单独函数，您已经朝着缓解这一方向迈出了一步。通过代码应用处理程序通过允许调试处理函数的应用程序来改善这一点。

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

来源

2011-11-22 04:06:18 tvanfosson

第二种方法是分离关注领域的方法。网页关注的三个方面是介绍，结构和功能。 CSS处理演示文稿。 HTML处理结构。和Javascript处理功能。

某些Javascript代码会在某处注册下拉列表所需的功能，因此HTML只关注结构;这是一个下拉列表。

来源

2011-11-22 03:53:13

JavaScript操作听众

回答

相关问题