Posted on 2008-12-21 10:07
鱼跃于渊 阅读(266)
评论(0) 编辑 收藏 所属分类:
javascript相关
为什么用 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 无法删除匿名函数的事件处理程序，只有在物件（比如按钮）去除之后，该内存才可能得到回收。