為了以跨瀏覽器的方式處理事件，不少開發人員會使用能夠隔離瀏覽器差異的 JavaScript 庫，還有 一些開發人員會自己開發合適的事件處理的方法。自己編寫代碼其實也不難，只要恰當地使用能力檢 測即可。要保證處理事件的代碼能在大多數瀏覽器下一致地運行，只需關 注冒泡階段。

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

與 addHandler()對應的方法是 removeHandler()，它也接受相同的參數。這個方法的職責是移 除之前添加的事件處理程序——無論該事件處理程序是采取什么方式添加到元素中的，如果其他方法無 效，默認采用 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;

}

}

};

這兩個方法首先都會檢測傳入的元素中是否存在 DOM2級方法。如果存在 DOM2級方法，則使用 該方法：傳入事件類型、事件處理程序函數和第三個參數 false(表示冒泡階段)。如果存在的是 IE的 方法，則采取第二種方案。注意，為了在 IE8及更早版本中運行，此時的事件類型必須加上"on"前綴。 后一種可能就是使用 DOM0級方法(在現代瀏覽器中，應該不會執行這里的代碼)。此時，我們使用 的是方括號語法來將屬性名指定為事件處理程序，或者將屬性設置為 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 級對每個事件只支持一 個事件處理程序。好在，只支持 DOM0級的瀏覽器已經沒有那么多了，因此這對你而言應該不是什么 問題。

本文僅限內部技術人員學習交流,不得作于其他商業用途.希望此文對廣技人員有所幫助。原創文章出自:南昌APP開發公司-百恒網絡 http://www.51yjwy.com/app/index.html 如轉載請注明出處!