資源描述:
《JavaScript綁定事件監(jiān)聽函數(shù)的通用方法_javascript技巧》由會員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在工程資料-天天文庫。
1、JavaScript綁定事件監(jiān)聽函數(shù)的通用方法事件綁定的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)是正
2、在處理事件的節(jié)點(如當(dāng)前正在運(yùn)彳亍事件句柄的節(jié)點);d、監(jiān)聽函數(shù)的執(zhí)行順序應(yīng)當(dāng)是按照綁定的順序執(zhí)行;c、在函數(shù)體內(nèi)不用使用event=event
3、
4、window,event;來標(biāo)準(zhǔn)化Event對象;一、JohnResig所寫的addEvent()函數(shù)functionaddEvent(obj,type,fn){if(obj.eittachEvent){obj['e'+type+fn]=fn;obj[type+fn]=function(){objfe"+type+fn](window,event);}obj.attac
5、hEvent('on'+type,obj[type+fn]);}elseobj.addEvcntListcncr(type,fn,false);}functionremoveEvent(obj,type,fn){if(obj.detachEvent){obj.detachEvent('on'+type,obj[type+fn]);obj[type+fn]=null;}elseobj.removeEventListener(type,fn,false);這個函數(shù)如此簡單易懂,的確非常令人驚訝。那么我們還是要看看上而的
6、五點要求:對于第一點滿足了;對于第三點和第五點,肯定也滿足了;對于第二點,并沒冇滿足,因為addEventListener()會忽略重復(fù)注冊,而attachEvcnt()則不會忽略;但是第四點,并沒有滿足,因為Dom標(biāo)準(zhǔn)沒有確定調(diào)用一個對象的時間處理函數(shù)的順序,所以不應(yīng)該想當(dāng)然的認(rèn)為它們以注冊的順序調(diào)用。但是這個函數(shù)仍然是一個非常優(yōu)秀的函數(shù)。二、DeanEdward所寫的addEvent()函數(shù)functionaddEvent(element,type,handler){if([handler.$$guid)han
7、dler.$$guid二addEvent.guid++;if(!element.events)element.events二{};varhandlers=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]二handleE
8、vent;}addEvent?guid=1;functionremoveEvent(element,type,handler){if(element,events&&element.events[type]){deleteelement.events[type][handler?$$guid];}}functionhandleEvent(event){varreturnValue=true;event=event
9、
10、fixEvent(window.event);varhandlers=this?cvcnts[cvc
11、nt?type];for(variinhandlers){this.$$handleEvent二handlers[i];if(this.$$handleEvent(event)===false){returnValue=false;}rcturnrcturnValuc;};functionfixEvent(event){event.preventDefault二fixEvent.preventDefault;event.stopPropagation二fixEvent?stopPropagation;rcturne
12、vent;};fixEvent.preventDefault=function(){this.returnValue二false;};fixEvent.stopPropagation=function(){this.cancelBubble=true;};該函數(shù)使用了傳統(tǒng)的綁定方法,所以它可以在所有的瀏覽器中工作,也不會造成內(nèi)存泄露。但是對于最初提出的5點,