在 Javascript 中添加事件的正确和最有效的方法？ [复制]答案

【问题标题】：Proper and most efficient way to add events in Javascript? [duplicate]在 Javascript 中添加事件的正确和最有效的方法？ [复制]
【发布时间】：2015-02-17 12:55:41
【问题描述】：

我正在开发一个应用程序，速度是一个问题。将事件附加到元素时，我知道有两种方法：

element.addEventListener('click', function() {
    // code to execute onclick
})

或

element.onclick = function() {
    // code to execute onclick
}

哪种方式更高效、更健壮？ ...即使两者都有效，这是正确/首选的方式？

【问题讨论】：

element.addEventListener 将允许您添加多个处理程序-我怀疑onclick 无论如何都会调用addEventListener，这意味着addEventListener 是您的答案。
使用 addEventListener 您可以根据需要为元素添加任意数量的事件侦听器，而使用第二种方法则不可能，如果您尝试重新连接另一个处理程序，它只会替换最后一个附加的处理程序.
我觉得有些 Knuth 在这里是为了：“过早的优化是万恶之源” ...换句话说，你有性能问题，还是您预期有问题？如果是后者（我怀疑），您可能想要使用最容易读/写的方法，然后测量您的性能，如果您有一个问题，改变一件事，然后再次测量。不要使用猜测。
只是一个旁注，使用引用而不是匿名函数，这样你也可以删除监听器。
我推荐阅读quirksmode.org/js/introevents.html

标签： javascript events

【解决方案1】：

如果您想将多个事件附加到您的元素，则需要使用 addEventListener。如果没有，内联事件就可以解决问题。在速度方面不会有任何差异。请注意，

element.onclick = function () { alert('1'); };
element.onclick = function () { alert('2'); };

只会提示“2”，而

element.addEventListener('click', function() {alert('1');}
element.addEventListener('click', function() {alert('2');}

将提醒“1”和“2”

仅与 addEventListener 一样，这两个事件都会被触发并且不会被后面的事件覆盖

element.onclick

正如你所写，它只是内联 javascript

<button onclick=function() ...

写在你的脚本部分。

正如@Teemu 评论的那样，设置 onclick 属性不会反映到 HTML，因此内联处理程序不等于属性

【讨论】：

注意，设置 onclick 属性不会反映到 HTML，因此内联处理程序不等于属性。