javascript 事件處理程序介紹_javascript技巧

1、DOM0級事件處理程序
將一個函數值給一個事件處理程序屬性。
例如：

複製程式碼 程式碼如下:

var btn = document. "myBtn");
btn.onclick = funtion(){
alert(this.id); //"myBtn"
}

刪除事件，btn.onclick = null;
-------------------------------------------- ------------------------------------
2、DOM2級事件處理程序
先介紹，「DOM2級事件」定義的兩個方法，用於處理指定和刪除事件處理程序的操作：
addEventListener()
removeEventListener()
所有DOM節點都包含這兩個方法，接受3個參數：處理事件名、作為事件處理程序的函數、一個布林值。
最後的布林值參數，true：表示在捕獲階段呼叫事件處理程序；false：表示在冒泡階段呼叫事件處理程序。

複製程式碼 程式碼如下:

var btn = document.getElementBytn"
btn.addEventListener("click",funciton(){
alert(this.id);
},false);

用DOM2級方法加入事件處理程序主要的好處是可以添加多個事件處理程序。
例如：

複製程式碼 程式碼如下:

var btn = document. "myBtn");
btn.addEventListener("click",funciton(){
alert(this.id);
},false);
btn.addEventListener("click",funciton (){
alert(“Hello World!”);
},false);

這兩個事件會依照順序觸發。
透過 addEventListener()新增的事件只能用removeEventListener()移除。移除時傳入的參數需與新增時的參數一致，也就是說匿名函數將無法移除。

複製程式碼 程式碼如下:

var btn = document.getElementBytn"
var handler = function(){
alert(this.id);
};
btn.addEventListener("click" , handler , false);
btn.removeEventListenerener ("cove ", handler , false);

大多數情況下，都是將事件處理程序新增至事件流的冒泡階段，以便與各種瀏覽器相容。
firefox、safari、chrome、opera支援DOM2級事件處理程序。
----------------------------------------------- ---------------------------------
3、IE事件處理程序
IE實作了與DOM類似的兩個方法：
attachEvent()
detachEvent()
這兩個方法都接受兩個參數：事件處理程序名稱和事件處理程序函數。
由於IE只支援時間冒泡，所以透過attachEvent() 新增的事件處理程序都會被加入冒泡階段。
例如：

複製程式碼 程式碼如下:

var btn = document. "myBtn");
btn.attachEvent("onclick" , function(){
alert("Clicked");
})

注意，attachEvent()的第一個參數是「onclick」,而非「click」。
IE的attachEvent()與DOM0的addEventListener()的主要差異是事件處理程序的作用域。
DOM0級方法，事件處理程序會在所屬元素的作用域內運行；
attachEvent()方法，事件處理程序會在全域作用域中執行，因此 this等於 window。
attachEvent()也可以為一個元素新增多個事件處理程序。

複製程式碼 程式碼如下:

var btn = document.getElementBytn"
btn.attachEvent(”onclick“ , function(){
alert("clicked");
})
btn.attachEvent(”onclick“ , function(){
alerttn( "Hello World!");
})

與DOM方法不同的是，這些事件處理程序不是以新增順序執行，而是以相反的方向執行。
detachEvent() 的用法與removeEventListener()的用法相同。
----------------------------------------------- ---------------------------------
4、跨瀏覽器的事件處理程序

複製程式碼 程式碼如下:

var EventUtil = {


var EventUtil = {
element, 型態 , handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if ( element.attachEvent){
"on" type , handler)
} else {
element["on" type] = handler;
}
},
removeHandler: function( element , type , handler){
if ( element.removeElementListener) {
element.removeElementListener( type , handler , flase);
} else if ( element.detachEvent) {
element.detachEvent ( 🎜>} else {
element["on" type] = handler;
}
}

}