為了以跨瀏覽器的方式處理事件，不少開發(fā)人員會使用能夠隔離瀏覽器差異的 JavaScript 庫，還有 一些開發(fā)人員會自己開發(fā)合適的事件處理的方法。自己編寫代碼其實(shí)也不難，只要恰當(dāng)?shù)厥褂媚芰z 測即可。要保證處理事件的代碼能在大多數(shù)瀏覽器下一致地運(yùn)行，只需關(guān) 注冒泡階段。

第一個(gè)要?jiǎng)?chuàng)建的方法是 addHandler()，它的職責(zé)是視情況分別使用 DOM0 級方法、DOM2 級方 法或 IE方法來添加事件。這個(gè)方法屬于一個(gè)名叫 EventUtil 的對象，本書將使用這個(gè)對象來處理瀏覽 器間的差異。addHandler()方法接受 3個(gè)參數(shù)：要操作的元素、事件名稱和事件處理程序函數(shù)。

與 addHandler()對應(yīng)的方法是 removeHandler()，它也接受相同的參數(shù)。這個(gè)方法的職責(zé)是移 除之前添加的事件處理程序——無論該事件處理程序是采取什么方式添加到元素中的，如果其他方法無 效，默認(rèn)采用 DOM0級方法。 EventUtil 的用法如下所示。

var EventUtil = {

addHandler: function(element, type, handler){

if (element.addEventListener){

element.addEventListener(type, handler, false);

} else if (element.attachEvent){

element.attachEvent("on" + type, handler);

} else { element["on" + type] = handler;

}

},

removeHandler: function(element, type, handler){

if (element.removeEventListener){

element.removeEventListener(type, handler, false);

} else if (element.detachEvent){

element.detachEvent("on" + type, handler);

} else {

element["on" + type] = null;

}

}

};

這兩個(gè)方法首先都會檢測傳入的元素中是否存在 DOM2級方法。如果存在 DOM2級方法，則使用 該方法：傳入事件類型、事件處理程序函數(shù)和第三個(gè)參數(shù) false(表示冒泡階段)。如果存在的是 IE的 方法，則采取第二種方案。注意，為了在 IE8及更早版本中運(yùn)行，此時(shí)的事件類型必須加上"on"前綴。 后一種可能就是使用 DOM0級方法(在現(xiàn)代瀏覽器中，應(yīng)該不會執(zhí)行這里的代碼)。此時(shí)，我們使用 的是方括號語法來將屬性名指定為事件處理程序，或者將屬性設(shè)置為 null。

可以像下面這樣使用 EventUtil 對象：

var btn = document.getElementById("myBtn");

var handler = function(){

alert("Clicked");

};

EventUtil.addHandler(btn, "click", handler);

//這里省略了其他代碼

EventUtil.removeHandler(btn, "click", handler);

addHandler()和 removeHandler()沒有考慮到所有的瀏覽器問題，例如在 IE中的作用域問題。 不過，使用它們添加和移除事件處理程序還是足夠了。此外還要注意，DOM0 級對每個(gè)事件只支持一 個(gè)事件處理程序。好在，只支持 DOM0級的瀏覽器已經(jīng)沒有那么多了，因此這對你而言應(yīng)該不是什么 問題。

本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對廣技人員有所幫助。原創(chuàng)文章出自:南昌APP開發(fā)公司-百恒網(wǎng)絡(luò) http://www.gimmickmag.com/app/index.html 如轉(zhuǎn)載請注明出處!