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

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

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

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

4

1 回答 1

3

方法 A 和 B

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

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

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

方法 C

addEventListener是附加事件的标准。很长一段时间，IE 都不支持这种方式，而倾向于使用它的等效attachEvent方法。它们之间的一些区别包括：

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

IE9上线并支持addEventListener.

于 2012-07-06T18:49:25.153 回答