事件綁定的3中常用方法：傳統(tǒng)綁定、W3C綁定方法、IE綁定方法。但是，在實際開發(fā)中對于我們來講重要的是需要一個通用的、跨瀏覽器的綁定方法。如果我們在互聯(lián)網(wǎng)上搜索一下會發(fā)現(xiàn)許多方法，以下是比較知名的幾種方法：
在開始學(xué)期下面幾種方法之前，應(yīng)當(dāng)討論一下，一個好的addEvent()方法應(yīng)當(dāng)達(dá)到哪些要求：
a、支持同一元素的同一事件句柄可以綁定多個監(jiān)聽函數(shù)；
b、如果在同一元素的同一事件句柄上多次注冊同一函數(shù)，那么第一次注冊后的所有注冊都被忽略；
c、函數(shù)體內(nèi)的this指向的應(yīng)當(dāng)是正在處理事件的節(jié)點（如當(dāng)前正在運(yùn)行事件句柄的節(jié)點）；
d、監(jiān)聽函數(shù)的執(zhí)行順序應(yīng)當(dāng)是按照綁定的順序執(zhí)行；
e、在函數(shù)體內(nèi)不用使用 event = event || window.event; 來標(biāo)準(zhǔn)化Event對象；
一、John Resig 所寫的 addEvent() 函數(shù)
function addEvent( obj, type, fn ) { if ( obj.attachEvent ) { obj['e'+type+fn] = fn; obj[type+fn] = function(){obj['e'+type+fn]( window.event );} obj.attachEvent( 'on'+type, obj[type+fn] ); } else obj.addEventListener( type, fn, false ); } function removeEvent( obj, type, fn ) { if ( obj.detachEvent ) { obj.detachEvent( 'on'+type, obj[type+fn] ); obj[type+fn] = null; } else obj.removeEventListener( type, fn, false ); }這個函數(shù)如此簡單易懂，的確非常令人驚訝。那么我們還是要看看上面的五點要求：
對于第一點滿足了；
對于第三點和第五點，肯定也滿足了；
對于第二點，并沒有滿足，因為addEventListener()會忽略重復(fù)注冊，而attachEvent()則不會忽略；
但是第四點，并沒有滿足，因為Dom標(biāo)準(zhǔn)沒有確定調(diào)用一個對象的時間處理函數(shù)的順序，所以不應(yīng)該想當(dāng)然的認(rèn)為它們以注冊的順序調(diào)用。
但是這個函數(shù)仍然是一個非常優(yōu)秀的函數(shù)。
二、Dean Edward 所寫的 addEvent() 函數(shù)
function addEvent(element, type, handler) { if (!handler.$$guid) handler.$$guid = addEvent.guid++; if (!element.events) element.events = {}; var handlers = element.events[type]; if (!handlers) { handlers = element.events[type] = {}; if (element["on" + type]) { handlers[0] = element["on" + type]; } } handlers[handler.$$guid] = handler; element["on" + type] = handleEvent;}addEvent.guid = 1; function removeEvent(element, type, handler) { if (element.events && element.events[type]) { delete element.events[type][handler.$$guid]; }}function handleEvent(event) { var returnValue = true; event = event || fixEvent(window.event); var handlers = this.events[event.type]; for (var i in handlers) { this.$$handleEvent = handlers[i]; if (this.$$handleEvent(event) === false) { returnValue = false; } } return returnValue;}; function fixEvent(event) { event.preventDefault = fixEvent.preventDefault; event.stopPropagation = fixEvent.stopPropagation; return event;};fixEvent.preventDefault = function() { this.returnValue = false;};fixEvent.stopPropagation = function() { this.cancelBubble = true;}; 該函數(shù)使用了傳統(tǒng)的綁定方法，所以它可以在所有的瀏覽器中工作，也不會造成內(nèi)存泄露。
但是對于最初提出的5點，該函數(shù)只是滿足了前四點。只有最后一點沒有滿足，因為在JavaScript中對for/in語句的執(zhí)行順序沒有規(guī)定是按照賦值的順序執(zhí)行，盡管大部分時刻是按照預(yù)期的順序執(zhí)行，因此在不同的JavaScript版本或?qū)崿F(xiàn)中這一語句的順序有可能不同。
三、Dean Edward 的 addEvent() 函數(shù)的改進(jìn)
Array.prototype.indexOf = function( obj ){ var result = -1 , length = this.length , i=length - 1; for ( ; i>=0 ; i-- ) { if ( this[i] == obj ) { result = i; break; } } return result;}Array.prototype.contains = function( obj ) { return ( this.indexOf( obj ) >=0 )}Array.prototype.append = function( obj , nodup ) { if ( !(nodup && this.contains( obj )) ) { this[this.length] = obj; }}Array.prototype.remove = function( obj ) { var index = this.indexOf( obj ); if ( !index ) return ; return this.splice( index , 1);};function addEvent(element , type , fun){ if (!element.events) element.events = {}; var handlers = element.events[type]; if (!handlers) { handlers = element.events[type] = []; if(element['on' + type]) { handlers[0] = element['on' + type]; } } handlers.append( fun , true) element['on' + type] = handleEvent;}function removeEvent(element , type , fun) { if (element.events && element.events[type]) { element.events[type].remove(fun); }}function handleEvent(event) { var returnValue = true , i=0; event = event || fixEvent(window.event); var handlers = this.events[event.type] , length = handlers.length; for ( ; i < length ; i++) { if ( handlers[i].call( this , event) === false ){ returnValue = false; } } return returnValue;}function fixEvent(event) { event.preventDefault = fixEvent.preventDefault; event.stopPropagation = fixEvent.stopPropagation; return event;}fixEvent.preventDefault = function() { this.returnValue = false;};fixEvent.stopPropagation = function() { this.cancelBubble = true;}; 該函數(shù)是本人對Dean Edward 的 addEvent() 函數(shù)的改進(jìn)，完全滿足了最初提出的5點要求，希望對大家的學(xué)習(xí)有所幫助，謝謝大家的閱讀。
新聞熱點
疑難解答
