<div id="myDiv" onclick="MyFunc()"></div>document.getElementById("myDiv").onclick = MyFunc;document.getElementById("myDiv").addEventListener("click", MyFunc, false)
现在，这3种将事件附加到DOM元素的方法之间有什么区别（忽略3种方法在IE上不起作用的事实）？
<div id="myDiv" onclick="MyFunc()"></div>document.getElementById("myDiv").onclick = MyFunc;document.getElementById("myDiv").addEventListener("click", MyFunc, false)
1条答案
按热度按时间lmvvr0a81#
方法A和B
这些被称为DOM零级事件，有点老派。方法A在HTML中声明它（不好），而方法B做同样的事情，但集中在JS中。
对于方法A，属性值是一个有效JS的字符串，在触发时将被求值（也是坏的）。由于事件被绑定的位置，这意味着在这个字符串中引用的任何函数必须是全局的（或全局可访问的方法）。对于方法B，事件被集中绑定在JS中，而不是内联的。
除了过时和简化之外，它们的主要警告是每个元素只能绑定一种事件。如果您试图用这种机制将两个单击事件处理程序绑定到同一个事件处理程序，第一个将被忘记。这是显而易见的，因为您只是在覆盖元素属性。
方法C
addEventListener是附加事件的标准，IE很长一段时间都不支持这个方法，而是支持它的等价方法attachEvent，它们之间的一些区别包括：attachEvent不允许捕获事件（addEventListener的参数3允许）attachEvent时，在window.event上访问事件对象（即存储有关已触发事件的信息的对象），而使用addEventListener时，将其作为回调的唯一参数转发attachEvent时，事件名称必须以on为前缀，例如onClick。addEventListener只需要clickaddEventListener，回调中的this关键字指向触发事件的元素。在attachEvent中，您必须通过从event（window.event）对象的属性中提取元素来自行破译此关键字IE9也加入进来，支持
addEventListener。