| 上篇文章講到了事件綁定的3中常用方法:傳統綁定、W3C綁定方法、IE綁定方法。但是,在實(shí)際開(kāi)發(fā)中對于我們來(lái)講重要的是需要一個(gè)通用的、跨瀏覽 器的綁定方法。如果我們在互聯(lián)網(wǎng)上搜索一下會(huì )發(fā)現許多方法,一下是比較知名的幾種方法: 在開(kāi)始學(xué)期下面幾種方法之前,應當討論一下,一個(gè)好的addEvent()方法應當達到哪些要求: a、支持 同一元素的同一事件句柄可以綁定多個(gè)監聽(tīng)函數; b、如果 在同一元素的同一事件句柄上多次注冊同一函數,那么第一次注冊后的所有注冊都被忽略; c、函數 體內的this指向的應當是正在處理事件的節點(diǎn)(如當前正在運行事件句柄的節點(diǎn)); d、監聽(tīng) 函數的執行順序應當是按照綁定的順序執行; e、在函 數體內不用使用 event = event || window.event; 來(lái)標準化Event對象; 一、John Resig 所寫(xiě)的 addEvent() 函數:http://ejohn.org/projects/flexible-javascript-events/
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 ); }
這個(gè)函數如此簡(jiǎn)單易懂,的確非常令人驚訝。那么我們還是要看看上面的五點(diǎn)要求: 對于第一 點(diǎn)滿(mǎn)足了; 對于第三 點(diǎn)和第五點(diǎn),肯定也滿(mǎn)足了; 對于第二 點(diǎn),并沒(méi)有滿(mǎn)足,因為addEventListener()會(huì )忽略重復注冊,而attachEvent()則不會(huì )忽略; 但是第四 點(diǎn),并沒(méi)有滿(mǎn)足,因為Dom標準沒(méi)有確定調用一個(gè)對象的時(shí)間處理函數的順序,所以不應該想當然的認為它們以注冊的順序調用。 但是這個(gè)函數仍然是一個(gè)非常優(yōu)秀的函數。 二、Dean Edward 所寫(xiě)的 addEvent() 函數 :http://dean.edwards.name/weblog/2005/10/add-event2/
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; };
該函數使用了傳統的綁定方法,所以它可以在所有的瀏覽器中工作,也不會(huì )造成內存泄露。 但是對于最初提出的5點(diǎn),該函數只是滿(mǎn)足了前四點(diǎn)。只有最后一點(diǎn)沒(méi)有滿(mǎn)足,因為在JavaScript中對for/in語(yǔ)句的執行順序沒(méi)有規定是按照賦值 的順序執行,盡管大部分時(shí)刻是按照預期的順序執行,因此在不同的JavaScript版本或實(shí)現中這一語(yǔ)句的順序有可能不同。 三、Dean Edward 的 addEvent() 函數的改進(jìn)
![]() 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; };
該函數是本人對Dean Edward 的 addEvent() 函數的改進(jìn),完全滿(mǎn)足了最初提出的5點(diǎn)要求。如果大家有更好的方法,期待分享! |
聯(lián)系客服