在Javascript中添加事件的正确且最有效的方法？

Question

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

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

或

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

哪种方式更有效，更强大？ ......即使两者都有效，这是正确/首选的方式吗？

Answer 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，因此内联处理程序不等于属性