Posted on 2008-12-21 10:07
魚躍于淵 閱讀(269)
評論(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 無法刪除匿名函數的事件處理程序，只有在物件（比如按鈕）去除之后，該內存才可能得到回收。