JavaScirpt中的事件處理程序

事件處理在JS中可謂是點睛一筆，JS的事件處理程序使得JS成爲了網頁交互層的第一把交椅。那麼，JS中有幾種事件處理程序呢？

1.DOM0級事件處理程序

經過JS指定事件處理程序的傳統方式，就是將一個函數添加給一個對象的事件處理程序。這種方式爲現代全部的瀏覽器所用。緣由一是方便簡單，緣由二是能夠實現跨瀏覽器。

1     var oA = document.getElementsByTagName("a")[0]; 2         oA.onclick = function(){ 3             alert(this.id); 4 
5     }    

咱們經過一個doucment對象獲取到一個A標籤的引用，而後在這個引用上添加onclick事件，可是有一點須要注意，添加事件那一段代碼若是沒有執行，就不會指定事件處理程序，因此，代碼要在頁面中的a標籤以後。

刪除事件處理程序能夠經過一個空引用：

1 oA.onclick = null;

2.DOM2級事件處理程序

在「DOM2級事件」中定義了二個方法用來添加或者移除事件處理程序：

1.addEventListener();

2.removeEventListener();

這兩個方法的參數是同樣的，第一個是要添加的事件類型，第二個是事件處理程序的函數名（若是用的是匿名函數，則沒法移除），第三個是一個布爾值，true表明在事件捕獲時期就添加該事件處理程序，false表明在事件冒泡時期添加該事件處理程序，通常都用false。兼容性的話，IE9+，Firefox，Safari，Chrome，和Opera支持DOM2級事件處理程序。

1     oA.addEventListener("click",handle,false); 2     oB.addEventListener("click",handle,false); 3 
4     var handle = function(){ 5         alert(this.id); 6  } 7     
8     oA.removeEventListener("click",handle,false); 9     oB.removeEventListener("click",handle,false);

在這段代碼中，分別給oA和oB對象添加了click事件，在運行的時候，會先彈出oA的id，而後纔是oB的id，這兩個事件處理程序會按他們本身的順序去執行。注意，這裏是click事件，沒有on

3.IE事件處理程序

在IE中實西現了和DOM中相似的兩個方法：

1.attachEvent();

2.detachEvent();

這兩個方法接受同樣的參數，第一個是事件名，第二個是事件處理程序函數，用這兩個方法會默認在事件冒泡中添加事件處理程序。

1     oA.attachEvent("onclick",handle); 2     oB.attachEvent("onclick",handle); 3 
4     var handle = function(){ 5         alert(this.id); 6  } 7 
8     oA.detachEvent("onclick",handle); 9     oB.detachEvent("onclick",handle);

使用這兩個函數須要注意一下幾點：

1.第一個參數是帶on的，即onclick，這點不一樣於DOM2級的兩個方法。

2.做用域是不一樣的，這裏的this，不一樣於DOM0級的做用域。在IE中的事件處理程序，會在全局做用域下運行，也就是說這裏的this再也不表明事件添加的對象，而是一直表明着window對象。

3.順序也不一樣與DOM方法，這裏是會先執行第二句，而後再執行第一句，和DOM2級中的順序是相反的，是反過來執行的。

4.一樣的，匿名函數不能移除事件，最好用有名字的函數。

目前支持IE事件處理程序的瀏覽器有IE和Opera。

 

 

• DOM0級事件處理程序
• DOM2級事件處理程序
• IE事件處理程序