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

Question

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

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

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

现在，这 3 种将事件附加到 DOM 元素的方式有什么区别(忽略这 3 种方式在 IE 上不起作用的事实)？

Answer 1

方法A和B

这些被称为 DOM 级别零事件并且有些老派。方法 A 在您的 HTML 中内联声明它(错误)，而方法 B 做同样的事情，但集中在您的 JS 中。

对于方法 A，属性值是一串有效的 JS，在触发时将对其进行评估(也是错误的)。由于绑定(bind)事件的位置，这意味着此字符串中引用的任何函数都必须是全局的(或全局可访问的方法)。使用方法 B，事件在您的 JS 中集中绑定(bind)，而不是内联。

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

方法 C

addEventListener 是附加事件的标准。很长一段时间，IE 都不支持它，支持它的等效 attachEvent 方法。它们之间的一些区别包括:

• attachEvent 不允许捕获事件(addEventListener 的参数 3 允许此操作)
• 使用 attachEvent 时，事件对象(即存储有关触发事件的信息的对象)在 window.event 上访问，而使用 addEventListener 它作为回调的唯一参数转发
• 对于 attachEvent，事件名称必须以 on 为前缀，例如点击。 addEventListener 只需点击
• 通过addEventListener，回调中的this关键字指向触发事件的元素。在 attachEvent 中，您必须通过从事件 (window.event) 对象的属性中提取元素来自行破译

IE9 上线，支持addEventListener。