javascript 事件處理程序介紹
2024-05-06 14:21:41
供稿：網友
1、DOM0級事件處理程序
將一個函數值給一個事件處理程序屬性。
例如：
代碼如下:
var btn = document.getElementById("myBtn");
btn.onclick = funtion(){
alert(this.id); //"myBtn"
}
刪除事件，btn.onclick = null;
--------------------------------------------------------------------------------
2、DOM2級事件處理程序
先介紹，“DOM2級事件”定義的兩個方法，用于處理指定和刪除事件處理程序的操作：
addEventListener()
removeEventListener()
所有DOM節點都包含這兩個方法，接受3個參數：處理事件名、作為事件處理程序的函數、一個布爾值。
最后的布爾值參數，true：表示在捕獲階段調用事件處理程序；false：表示在冒泡階段調用事件處理程序。/
代碼如下:
var btn = document.getElementById("myBtn");
btn.addEventListener("click",funciton(){
alert(this.id);
},false);
用DOM2級方法添加事件處理程序主要的好處是可以添加多個事件處理程序。
例如：
代碼如下:
var btn = document.getElementById("myBtn");
btn.addEventListener("click",funciton(){
alert(this.id);
},false);
btn.addEventListener("click",funciton(){
alert(“Hello World！”);
},false);
這兩個事件會按照順序觸發。
通過 addEventListener()添加的事件只能用removeEventListener()移除。移除時傳入的參數需與添加時的參數一致，也就是說匿名函數將無法移除。
代碼如下:
var btn = document.getElementById("myBtn");
var handler = function(){
alert(this.id);
};
btn.addEventListener("click" , handler , false);
btn.removeEventListener("click", handler , false);
大多數情況下，都是將事件處理程序添加到事件流的冒泡階段，以便兼容各種瀏覽器。
firefox、safari、chrome、opera支持DOM2級事件處理程序。
--------------------------------------------------------------------------------
3、IE事件處理程序
IE實現了與DOM中類似的兩個方法：
attachEvent()
detachEvent()
這兩個方法都接受兩個參數：事件處理程序名稱和事件處理程序函數。
由于IE只支持時間冒泡，所以通過attachEvent() 添加的事件處理程序都會被添加到冒泡階段。
例如：
代碼如下:
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick" , function(){
alert("Clicked");
})
注意，attachEvent()的第一個參數是“onclick”,而非 “click”。
IE的attachEvent()與DOM0的addEventListener()的主要區別是事件處理程序的作用域。
DOM0級方法，事件處理程序會在所屬元素的作用域內運行；
attachEvent()方法，事件處理程序會在全局作用域中運行，因此 this等于 window。
attachEvent()也可以為一個元素添加多個事件處理程序。
代碼如下:
var btn = document.getElementById("myBtn");
