“DOM2級事件”定義了兩個方法翎嫡,用于處理指定和刪除事件處理程序的操作: addEventListener() 和 removeEventListener()。所有DOM節(jié)點中都包含這兩種方法贸营,并且他們都接受3個參數(shù):要處理的事件名,作為事件處理程序的函數(shù)和一個布爾值岩睁。最后這個布爾值參數(shù)如果是true钞脂,表示在捕獲階段調(diào)用事件處理程序;如果是false捕儒,表示在冒泡階段調(diào)用事件處理程序冰啃。
要在按鈕上為click時間添加事件處理程序,可以使用下列代碼:
var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
上面的代碼為一個按鈕添加onclick 時間長護理程序刘莹,而且該事件會在冒泡階段被觸發(fā)阎毅。(因為最后一個參數(shù)是false)。與DOM0級方法一樣点弯,這里添加的事件處理程序也是與其依附的元素的作用于中運行扇调。使用DOM2級方法處理事件處理程序的主要好處是可以添加多個事件處理程序。
var btn = document.getElementById("myBtn");
btn.addEventListener("click".function(){
alert(this.id);
},false);
btn.addEventListener("click",function(){
alert("Hello World");
},false);
這里為按鈕添加兩個事件處理程序抢肛。這兩個事件處理程序會按照添加他們的順序出發(fā)肃拜,因此首先會顯示元素的ID痴腌,其次會顯示“Hello World!”消息燃领。
通過addEventListener()添加的事件處理程序 只能使用removeEventListener()來移除士聪;移除時傳入的參數(shù)與處理程序時使用的參數(shù)想通。這也意味著通過addEventListener()添加的匿名函數(shù)將無法移除猛蔽,如下面的例子所示剥悟。
var btn = document.getElementById("myBtn");
var handler = function(){
alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);
大多數(shù)情況下,都是將事件處理程序添加到時間流的冒泡階段曼库,這樣可以最大限度地兼容各種瀏覽器区岗。最好只在需要在事件到達目標之前截獲它的時候?qū)⑹录幚沓绦蛱砑拥讲东@階段。如果不是特別需要毁枯,不建議在事件捕獲階段注冊時事件處理程序慈缔。
IE中,attachEvent(),detachEvent()种玛。這兩個方法接受相同的兩個參數(shù):事件處理程序名稱與時間處理程序函數(shù)藐鹤。由于IE8及更早版本只支持時間冒泡,所以通過attachEvent()添加的事件處理程序都會被添加到冒泡階段赂韵。