javascript - 在 JavaScript 中添加事件的最佳方式是什么?

标签 javascript html events event-binding

我看到在 JavaScript 中设置事件的两种主要方式:

  1. 像这样直接在标签内添加一个事件:

    <a href="" onclick="doFoo()">do foo</a>

  2. 像这样通过 JavaScript 设置它们:

    <a id="bar" href="">do bar</a>

并在 <script> 中添加一个事件<head> 里面的部分部分或外部 JavaScript 文件中,如果您使用的是 prototypeJS:

Event.observe(window, 'load', function() {
    $('bar').observe('click', doBar);
}

我认为第一种方法更容易阅读和维护(因为 JavaScript Action 直接绑定(bind)到链接)但它不是那么干净(因为即使页面没有完全加载用户也可以点击链接,这可能在某些情况下会导致 JavaScript 错误)。

第二种方法更简洁(当页面完全加载时添加操作)但更难知道操作链接到标签。

哪种方法最好?

一个 killer 级的答案将不胜感激!

最佳答案

I think the first method is easier to read and maintain

我发现事实恰恰相反。请记住,有时不止一个事件处理程序将绑定(bind)到一个给定的控件。

在一个中心位置声明所有事件有助于组织站点上发生的操作。如果您需要更改某些内容,则不必搜索调用函数的所有位置,只需在一个地方进行更改即可。添加更多应该具有相同功能的元素时,您不必记住向它们添加处理程序;相反,通常让它们声明一个类就足够了,甚至根本不更改它们,因为它们在逻辑上属于一个容器元素,该容器元素的所有子元素都连接到一个 Action 。来自实际代码:

$$('#itemlist table th > a').invoke('observe', 'click', performSort);

这将事件处理程序连接到表格中的所有列标题,以使表格可排序。想象一下使所有列标题可单独排序的努力。

关于javascript - 在 JavaScript 中添加事件的最佳方式是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34126/

相关文章:

javascript - 在 v5 中扩展 d3.selection——这是正确的做法吗?

javascript - 获取源代码的书签友好型 Javascript?

javascript - 停止一个功能并切换另一个功能

java - 哪个监听器可以知道 JTextPane 值已更改?

react-native - onLoadEnd 未在 native react 中触发

javascript - 中间的内容

javascript - 如何将图像列表放在固定的 div 中

java - "Go Back"单个 URL Web 应用程序中文件夹和子文件夹的按钮

javascript - 我如何只能产生 1 次随机值

Mac 上的 Java : How do I detect when my application receives focus?