在js中詳細介紹幾種類型的事件處理程序的方式

事件流描述的是從頁面中接收事件的順序。

事件處理程序就是對事件作出響應的函數。事件處理程序的名字以“on”開頭，如click事件對應的事件處理程序的名稱為onclick。

為事件指定處理程序的方式有多種，如：HTML事件處理程序、DMO0級事件處理程序、DOM2級事件處理程序、IE事件處理程序、跨瀏覽器事件處理程序。

（1）html事件處理程序

即：將事件處理程序，寫在相應的html標簽中。

eg:

<input type="button" value="click me" onclick="alert("hello")" />

缺點：①存在一個時間差，當用戶在html元素一出現在頁面上就去觸發相應的事件時，事件的處理程序可能還不具備執行條件（比如說調用的函數還木有被解析），就會引發錯誤。eg:

<input type="button" value="click me" onclick="message()" />

<script type="text/javascript">function message(){alert("hello world");}</script>

因為調用的函數處于按鈕的下方，如果在message函數被加載之前就點擊了按鈕就會引發錯誤。

②html和js代碼耦合度太高，如果要改變事件處理程序，就要改動兩個地方：html代碼和javascript代碼。

（2）DMO0級事件處理程序

eg:
var btn=document.getElementById("myBtn");
 btn.onclick=function(){alert(this.id)};

注意：如果這段代碼位于按鈕之后，就有可能在一點時間內怎么點擊都木有反應，因為在這段代碼運行以前不會指定事件處理程序。

DMO0級事件處理程序被認為是元素的方法，換句話說，DMO0級事件處理程序是在元素的作用域中運行的，所以程序中的this引用當前元素?？梢栽谑录幚沓绦蛑型ㄟ^this訪問元素的任何屬性和方法。

以這種方式添加的事件處理程序會在事件流的冒泡階段被處理。

也可刪除指定的事件處理程序，只要將事件處理程序的屬性設置為null就Ok了。

eg:
btn.onclick=null;將處理程序設置為null以后，再點擊按鈕不會發生任何動作。

（3）DOM2級事件處理程序

DOM2級事件定義了兩個方法，用于指定和刪除事件處理程序。這兩個操作分別為：addEventListener()和removeEventListner().所有的DOM節點都包含這兩個方法。他們要接受3個參數，分別為：要處理的事件名，處理函數，布爾值。最后的布爾值參數如果為ture,表示在捕獲階段處理程序，如果為false，表示在冒泡階段調用事件處理程序。

例如在按鈕上為click添加事件處理程序，可以用下面的代碼：

var btn=document.getElementById("myBtn");
btn.addEventListner("onclick",function(){alert("hello world");false});這里添加的事件處理程序也是依附于元素的的作用域

使用DOM2事件處理程序的優點是：可以為同一個元素添加多個事件處理程序。

例：var btn=getElementById("myBtn");
btn.addEventListner("click",function(){alert(this.id);},flase);
btn.addEventListner("click",function(){alert("hello world");},flase);

結果：先顯示id，后顯示hello world。

通過addEventListner()添加的事件處理程序只能通過removeEventListner來刪除。移除時使用的參數與添加事件處理程序的參數相同。另：通過addEventListner添加的匿名函數無法刪除。

（4）IE事件處理程序。

IE添加和刪除事件處理程序的函數分別為：attachEvent()和detachEvent();這兩個函數接收相同的兩個參數：事件處理程序名與事件處理函數。由于IE只支持事件冒泡，所以通過attachEvent添加的事件處理程序都會添加到冒泡階段。

例如：var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){alert("hello world");});

IE在使用attachEvent方法的情況下，事件處理程序的作用域為全局作用域，因此this等于window。（在編寫跨瀏覽器的代碼時，記住這一點非常重要）。

與addEventListner類似，attachEvent()方法也可以用來為一個元素添加多個事件處理程序；

eg:
var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){alert("clicked");});
btn.attachEvent("onclick",function(){alert("hello world");});

值得注意的是：這些事件的處理程序是按逆序觸發的，也就是說，先彈出hello world 再彈出clicked。

detach()使用方法略。

（5）跨瀏覽器的事件處理程序

為了以跨瀏覽器的方式處理事件，主要可以使用兩個方法：

①使用能隔離瀏覽器差異的js庫。

②自己編寫最適合的事件處理方法。這里要用到能力檢測，即：識別瀏覽器的能力。要保證代碼能在大多數瀏覽器下一致的運行，只須關注冒泡階段。

代碼步驟如下：首先要創建的方法是addHandler(用于處理跨瀏覽器的兼容性問題，這里沒有給出具體代碼),它的職責是視情況判定使用DOM0級方法，DOM2級方法，IE方法來添加事件。addHandler接收3個參數：要操作的元素、事件名稱、事件處理程序函數。這個方法屬于一個名叫EventUtil的對象。這里使用這個對象來處理瀏覽器之間的差異。

與addHandler對應的方法是removeHandler(),它也接受相同的參數。這個事件的職責是移除之前添加的事件處理程序。不論事件是以什么方式添加到對象中的，如果其他方法程序無效，則默認使用DOM0級方法。

使用EventUtil的方法如下：var btn=document.getElementById("myBtn");
var hander=function(){alert("hello")};//事件處理程序
EventUtil.addHandler(btn,"onclick",handler);
//其他代碼
EventUtil.removeHandler(btn,"onclick",handler);
addHandler()和removeHandler()沒有考慮到所有的瀏覽器問題，例如IE中作用域的問題，但是使用它們添加和移除事件處理程序還是足夠了。

上面是我整理給大家的在js中詳細介紹幾種類型的事件處理程序的方式，希望今后會對大家有幫助。

相關文章：

重點解答動態加載JS腳本，一語道破

javascript中遍歷EL表達式List集合中的值

如何在<script></script>標簽中一樣可以使用el表達式

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com