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

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

事件處理程序就是對(duì)事件作出響應(yīng)的函數(shù)。事件處理程序的名字以“on”開頭，如click事件對(duì)應(yīng)的事件處理程序的名稱為onclick。

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

（1）html事件處理程序

即：將事件處理程序，寫在相應(yīng)的html標(biāo)簽中。

eg:

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

缺點(diǎn)：①存在一個(gè)時(shí)間差，當(dāng)用戶在html元素一出現(xiàn)在頁(yè)面上就去觸發(fā)相應(yīng)的事件時(shí)，事件的處理程序可能還不具備執(zhí)行條件（比如說調(diào)用的函數(shù)還木有被解析），就會(huì)引發(fā)錯(cuò)誤。eg:

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

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

因?yàn)檎{(diào)用的函數(shù)處于按鈕的下方，如果在message函數(shù)被加載之前就點(diǎn)擊了按鈕就會(huì)引發(fā)錯(cuò)誤。

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

（2）DMO0級(jí)事件處理程序

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

注意：如果這段代碼位于按鈕之后，就有可能在一點(diǎn)時(shí)間內(nèi)怎么點(diǎn)擊都木有反應(yīng)，因?yàn)樵谶@段代碼運(yùn)行以前不會(huì)指定事件處理程序。

DMO0級(jí)事件處理程序被認(rèn)為是元素的方法，換句話說，DMO0級(jí)事件處理程序是在元素的作用域中運(yùn)行的，所以程序中的this引用當(dāng)前元素。可以在事件處理程序中通過this訪問元素的任何屬性和方法。

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

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

eg:
btn.onclick=null;將處理程序設(shè)置為null以后，再點(diǎn)擊按鈕不會(huì)發(fā)生任何動(dòng)作。

（3）DOM2級(jí)事件處理程序

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

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

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

使用DOM2事件處理程序的優(yōu)點(diǎn)是：可以為同一個(gè)元素添加多個(gè)事件處理程序。

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

結(jié)果：先顯示id，后顯示hello world。

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

（4）IE事件處理程序。

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

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

IE在使用attachEvent方法的情況下，事件處理程序的作用域?yàn)槿肿饔糜?，因此this等于window。（在編寫跨瀏覽器的代碼時(shí)，記住這一點(diǎn)非常重要）。

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

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

值得注意的是：這些事件的處理程序是按逆序觸發(fā)的，也就是說，先彈出hello world 再?gòu)棾鯿licked。

detach()使用方法略。

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

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

①使用能隔離瀏覽器差異的js庫(kù)。

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

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

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

使用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中詳細(xì)介紹幾種類型的事件處理程序的方式，希望今后會(huì)對(duì)大家有幫助。

相關(guān)文章：

重點(diǎn)解答動(dòng)態(tài)加載JS腳本，一語道破

javascript中遍歷EL表達(dá)式List集合中的值

如何在<script></script>標(biāo)簽中一樣可以使用el表達(dá)式

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com