addEventListener-有用的笔记

作者:vkvi 来源:ITPOW(原创) 日期:2008-10-21

为什么用 addEventListener

  • 可以对同一物件的同一事件绑定多个事件处理程序。
  • 可以通过事件流三个阶段更好地控制何时触发事件处理程序。
  • 工作于 DOM 元素,而不仅是 HTML 元素。

事件分发时添加 eventListener

不会立即触发 eventListener,可能会在下一个事件流(比如冒泡阶段)中触发。

多个相同的 eventListener

如下,三个参数完全相同,并且第二个参数不是匿名函数。

document.getElementById("myBox").addEventListener("click", Go, false);
document.getElementById("myBox").addEventListener("click", Go, false);
document.getElementById("myBox").addEventListener("click", Go, false);

会抛弃多余的,只保留一个,对应的 removeEventListener 也只用一次就可以了(removeEventListener 用法和 addEventListener 完全相同)。

但如果是第二个参数是匿名函数,比如:

document.getElementById("outDiv").addEventListener("click", function () { document.getElementById("info").innerHTML += "1";}, false);
document.getElementById("outDiv").addEventListener("click", function () { document.getElementById("info").innerHTML += "1";}, false);
document.getElementById("outDiv").addEventListener("click", function () { document.getElementById("info").innerHTML += "1";}, false);

则三个均有效,并且无法用 removeEventListener 除去。

this

事件处理程序中,this 变成了触发事件的控件,但我们仍推荐用 event.target 或 event.currentTarget。

早期的事件监听

在 DOM0 中,我们用 obj.onclick = FuncName,由于兼容性好,应用非常广泛,只是功能不如 addEventListener 强大。

内存问题

前面提到了许多使用域名函数的地方,有时这是没办法的,请参见在各浏览器中动态添加事件-参数篇,但这会导致内存问题。

一旦事件绑定之后,该绑定代码作用域的变量就都保留下来,不会被 JavaScript 引擎回收,这可能会引起占用大量内存的问题,由于 removeEventListener 无法删除匿名函数的事件处理程序,只有在物件(比如按钮)去除之后,该内存才可能得到回收。

相关文章