这些附加事件的方式有什么区别？

Question

A) <div id="myDiv" onclick="MyFunc()"></div>

B) document.getElementById("myDiv").onclick = MyFunc;

C) document.getElementById("myDiv").addEventListener("click", MyFunc, false)

现在，这三种将事件附加到DOM元素的方法之间有什么区别（忽略C不能在IE上工作的事实）？

Answer 1

方法A和B

这些被称为DOM级零事件，并且有些老派。方法A在你的HTML（坏）中内联声明它，因为方法B在JS中集中处理同样的事情。

使用方法A，属性值是一个有效的JS字符串，在触发时将被评估（也是坏的）。由于事件绑定的位置，这意味着此字符串中引用的任何函数必须是全局的（或全局可访问的方法）。使用方法B，事件在JS中集中绑定，而不是内联。

除了过时和简化之外，对它们的主要警告是，每个元素只能绑定一种事件。如果您尝试使用此机制将两个单击事件处理程序绑定到同一个事件处理程序，则第一个将被遗忘。这是有道理的，因为你只是覆盖一个元素属性。

方法C

addEventListener是附加事件的标准。很长一段时间，IE不支持这一点，支持其等效的attachEvent方法。它们之间的一些差异包括：

• attachEvent不允许捕获事件（addEventListener的参数3允许此操作）
• with attachEvent，事件对象（即存储有关已触发事件的信息的对象）在window.event上被访问，而对于addEventListener，它被作为唯一参数转发给回调
• attachEvent，事件名称必须以on为前缀，例如onClick。 addEventListener只需要click
• addEventListener，回调中的this关键字指向触发事件的元素。在attachEvent中，您必须通过从事件（window.event）对象中的属性中提取元素来自己解读这个元素

IE9排队并支持addEventListener。