使用addEventListner和简单的Onclick/Ondblclick调用函数有什么区别？

Question

使用addEventListner和简单的Onclick/Ondblclick调用函数有什么区别？

Answer 1

onclick等是DOM 0级事件。他们在每个浏览器中工作，但他们不允许您轻松地将多个处理程序添加到同一元素中的相同事件。这意味着，使用像

window.onload = function() { 
    // THE CODE TO RUN 
}; 

东西将删除已经没有任何功能，所以你不得不用这样的招数：

(function (oldonload) { 
    window.onload = function() { 
     // THE CODE TO RUN 
     oldonload(); 
    }; 
}(window.onload)); 

用的addEventListener你没有做到这一点。你只是写：

window.addEventListener("load", function() { 
    // THE CODE TO RUN 
}, false); 

它只是工作...但不是在IE浏览器！在IE上，你必须使用attachEvent，它除了在 IE之外不能在任何地方使用。所以，你还是要这样写代码：

function yourCode() { 
    // THE CODE TO RUN 
} 
if (window.addEventListener) { 
    window.addEventListener('load', yourCode, false); 
} else { 
    window.attachEvent('onload', yourCode); 
} 

而在所有情况下，你还需要检查文件是否已经加载，所以你只要运行你的代码瞬间，而不是将它绑定到一个已经发生的事件而不会再发生了 - 这意味着更多的代码：

function yourCode() { 
    // THE CODE TO RUN 
} 
if(document.loaded) { 
    yourCode(); 
} else { 
    if (window.addEventListener) { 
     window.addEventListener('load', yourCode, false); 
    } else { 
     window.attachEvent('onload', yourCode); 
    } 
} 

的一点是，如果你想让你的事件处理代码保持强劲，并与所有浏览器兼容，那么它很快变得非常复杂。这就是为什么我总是建议使用像jQuery库做出来给你，让你不必担心这些细节，只是写：

$('some-id').click(function() { 
    // THE CODE TO RUN 
}); 

，它神奇地运行在所有浏览器。

Answer 2

addEventListner允许您添加多个侦听器。

Answer 3

当您直接在节点上添加onclick/onmouseover时，您会将结构/数据与行为耦合在一起，这并不好，特别是如果您关心能否维护代码。 （使用addEventListener）你：（a）获得对你的JS单独进行增量更改的能力（反之亦然），（b）有能力在不同的JS上重复使用相同的JS HTML（在另一页上说），（c）获得单独缓存JS的能力（假设你把它放在一个外部文件中），从而提高总体性能。

最重要的是（正如@JohnPick的回答），它允许您将多个侦听器添加到同一个节点。