淺談Javascript事件處理程序的幾種方式_javascript技巧

事件就是使用者或瀏覽器本身執行的某種動作。比如說click,mouseover，都是事件的名字。而對應某個事件的函數就叫事件處理程序（或事件偵聽器）。為事件指定處理程序的方式有好幾種。
一：HTML事件處理程序。
如:

複製程式碼 程式碼如下:

程式碼如下:
function show(){
alert('hello world!');
}

相信這種方式是目前咱們大家用得比較多的一種，但是在html中指定事件處理程序有兩個缺點。
(1)首先：存在一個時差問題。就本範例來說,假設show()函數是在按鈕下方，頁面的最底部定義的，如果使用者在頁面解析show()函數之前就點擊了按鈕，就會引發錯誤；
(2)第二個缺點是html與javascript程式碼緊密耦合。如果要更換時間處理程序，就要改動兩個地方：html程式碼和javascript程式碼。
因此，許多開發人員摒棄html事件處理程序，轉而使用javascript指定事件處理程序。
二：Javascript指定事件處理程序
javascript指定事件處理程序包括三種方式：
(1):DOM0級事件處理程序
如：

複製程式碼

程式碼如下:

var btn=document.getElementById("mybtn");按鈕的引用
btn.onclick=function(){
alert('clicked');
alert(this.id); // mybtn

以此方式新增的事件處理程序會在事件流的冒泡階段被處理。
刪除DOM0級方法指定的事件處理程序：
btn.onclick=null; // 刪除事件處理程序
}
(2):DOM2級事件處理程序
DOM2級事件定義了兩個方法，用於處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()。所有DOM節點包含這兩個方法，而且它們都接受3個參數：要處理的事件名，做為事件處理程序的函數和一個布林值。最後這個參數如果是true,表示在捕獲階段呼叫事件處理程序；如果是fasle,表示在冒泡階段呼叫事件處理程序。
如：

複製程式碼

程式碼如下:

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

使用DOM2級事件處理程序的主要好處是可以新增多個事件處理程序。
如：

複製程式碼

程式碼如下:

var btn=document( "mybtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
btn.addEventListener("click",function (){
alert("hello world!");
},false);

這裡為按鈕新增了兩個事件處理程序。這兩個事件處理程序會按照它們的順序觸發。
透過addEventListener()新增的時間處理程序只能使用removeEventListener()來移除，移除時傳入的參數與新增時使用的參數相同。這也意味著透過addEventListener()新增的匿名函數將無法移除。
如：

複製程式碼

程式碼如下:

var btn=document( "mybtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
//移除
btn. removeEventListener("click",function(){ //這樣寫沒有用（因為胃第二次與第一次相比是一個完全不同的函數）
alert(this.id);
}, false);

解決方法：

複製程式碼

複製程式碼


程式碼
var btn=document.getElementById("mybtn");
var hander=function(){
alert(this.id);
};
btn.addEventListener("click" ,hander,false);

btn.removeEventListener("click",hander,false); // 有效
注意：這裡我們的第三個參數都是false,是在冒泡階段添加的。大多數情況下，都是就事件處理程序添加到事件流的冒泡階段，這樣可以最大限度的兼容各種瀏覽器。
三：IE事件處理程序
IE實作了兩個與DOM類似的方法:attachEvent()和detachEvent()。這兩個方法接受相同的兩個參數：事件處理程序名稱和事件處理程序函數。由於IE只支援時間冒泡，所有透過attachEvent()新增的事件處理程序都會被新增包冒泡階段。
如：

三：

複製程式碼 代碼如下:

代碼如下:
var btn=document.getElementById("mybtn");
btn.attachEvent("onclick",function(){
alert("clicked");
})

注意：attachEvent()函式的第一個參數是"onclick"，而非DOM的addEventListener()中的"click"。
attachEvent()方法也可以用來為一個元素增加多個事件處理程序。
如：

複製程式碼

程式碼如下:

var btn=document( "mybtn");
btn.attachEvent("onclick",function(){
alert("clicked");
});
btn.attachEvent("onclick",function() {
alert("hello world!");
});

這裡呼叫了兩次attachEvent(),為同一個按鈕添加了兩個不同的事件處理程序。不過，與DOM方法不同的是，這些事件處理程序不是以它們的新增順序執行，而是以相反的順序觸發。點擊這個範例中的按鈕：首先看到的是"hello world",然後才是"clicked".
使用attachEvent()新增的事件可以透過detachEvent()來移除，條件是必須提供相同的參數。

複製程式碼

程式碼如下:

var btn=document.getElementBtn
var hander=function(){
alert("clicked");
}
btn.detachEvent("onclick",hander}); // 移除

以上三種方式為目前的主要的事件處理程序方式，那看到這裡你一定會想到，既然不同的瀏覽器會有不同的差異，那怎麼保證跨瀏覽器的事件處理程序呢？
為了以跨瀏覽器的方式處理事件，不少的開發人員是使用能夠隔離瀏覽器差異性的Javascript庫，還有一些開發人員會自己開發最合適的事件處理方法。
這裡提供一個EventUtil物件,可以用這個物件來處理瀏覽期間的差異：

複製程式碼

程式碼如下:

var EventUtil = {
addHandler: function(element, type, handler){ // 此方法接受3個參數：要操作的元素，事件名稱與事件處理程序函數
if (element.addEventListener){ //檢查傳入的元素是否有DOM2級方法
element.addEventListener(type, handler, false); // 若存在，則使用此方法
} else if (element .addEvent){ // 如果存在的是IE的方法
element.attachEvent("on" type, handler); //則使用IE的方法，注意，這裡的事件類型必須加上"on"前綴。
} else { // 最後一種可能是使用DOM0級
element["on" type] = hander;
}
},

removeHandler: function(element, type, handler){ // 此方法是刪除先前新增的事件處理程序
if (element.removeEventListener){ //檢查傳入的元素是否存在DOM2級方法
element.removeEventListener(type, handler, false); // 若存在，則使用此方法
} else if (element.detachEvent){ // 如果存在的是IE的方法
element.detachEvent("on" type, handler); //則使用IE的方法，注意，這裡的事件類型必須加上"on"前綴。
} else { // 最後一種可能是使用DOM0及方法(在現代瀏覽器中，應該不會執行這裡的程式碼)
element["on" type] = null;
}
}
};

可以像下面這樣使用EventUtil物件:

複製程式碼

複製程式碼複製程式碼複製程式碼複製程式碼複製程式碼複製碼> 程式碼如下:

var btn =document.getElementById("mybtn");
var hander= function(){
alert("clicked");
};
//這裡省略了部分程式碼
EventUtil.addHandler(btn,"click",hander);
//這裡省略了部分程式碼
EventUtil.removeHandler(btn,"click",hander); //移除之前新增的事件處理程序

可見，使用addHandler和removeHandler來新增和移除事件處理程序還是很方便的。