JavaScript綁定事件監(jiān)聽(tīng)函數(shù)的通用方法_javascript技巧

JavaScript綁定事件監(jiān)聽(tīng)函數(shù)的通用方法_javascript技巧

ID:41393949

大?。?5.33 KB

頁(yè)數(shù):5頁(yè)

時(shí)間:2019-08-24

JavaScript綁定事件監(jiān)聽(tīng)函數(shù)的通用方法_javascript技巧_第1頁(yè)
JavaScript綁定事件監(jiān)聽(tīng)函數(shù)的通用方法_javascript技巧_第2頁(yè)
JavaScript綁定事件監(jiān)聽(tīng)函數(shù)的通用方法_javascript技巧_第3頁(yè)
JavaScript綁定事件監(jiān)聽(tīng)函數(shù)的通用方法_javascript技巧_第4頁(yè)
JavaScript綁定事件監(jiān)聽(tīng)函數(shù)的通用方法_javascript技巧_第5頁(yè)
資源描述:

《JavaScript綁定事件監(jiān)聽(tīng)函數(shù)的通用方法_javascript技巧》由會(huì)員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)

1、JavaScript綁定事件監(jiān)聽(tīng)函數(shù)的通用方法事件綁定的3中常用方法:傳統(tǒng)綁定、W3C綁定方法、IE綁定方法。但是,在實(shí)際開(kāi)發(fā)小對(duì)于我們來(lái)講重要的是需要一個(gè)通用的、跨瀏覽器的綁定方法。如果我們?cè)诨ヂ?lián)網(wǎng)上搜索一下會(huì)發(fā)現(xiàn)許多方法,以下是比較知名的兒種方法:在開(kāi)始學(xué)期下面兒種方法之前,應(yīng)當(dāng)討論一下,一個(gè)好的addEvent()方法應(yīng)當(dāng)達(dá)到哪些要求:a、支持同一元索的同一事件句柄可以綁定多個(gè)監(jiān)聽(tīng)函數(shù);b、如果在同一元素的同一事件句柄上多次注冊(cè)同一函數(shù),那么第一次注冊(cè)后的所有注冊(cè)都被忽略;c^函數(shù)體內(nèi)的this指向的應(yīng)當(dāng)是正

2、在處理事件的節(jié)點(diǎn)(如當(dāng)前正在運(yùn)彳亍事件句柄的節(jié)點(diǎn));d、監(jiān)聽(tīng)函數(shù)的執(zhí)行順序應(yīng)當(dāng)是按照綁定的順序執(zhí)行;c、在函數(shù)體內(nèi)不用使用event=event

3、

4、window,event;來(lái)標(biāo)準(zhǔn)化Event對(duì)象;一、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);這個(gè)函數(shù)如此簡(jiǎn)單易懂,的確非常令人驚訝。那么我們還是要看看上而的

6、五點(diǎn)要求:對(duì)于第一點(diǎn)滿足了;對(duì)于第三點(diǎn)和第五點(diǎn),肯定也滿足了;對(duì)于第二點(diǎn),并沒(méi)冇滿足,因?yàn)閍ddEventListener()會(huì)忽略重復(fù)注冊(cè),而attachEvcnt()則不會(huì)忽略;但是第四點(diǎn),并沒(méi)有滿足,因?yàn)镈om標(biāo)準(zhǔn)沒(méi)有確定調(diào)用一個(gè)對(duì)象的時(shí)間處理函數(shù)的順序,所以不應(yīng)該想當(dāng)然的認(rèn)為它們以注冊(cè)的順序調(diào)用。但是這個(gè)函數(shù)仍然是一個(gè)非常優(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)的綁定方法,所以它可以在所有的瀏覽器中工作,也不會(huì)造成內(nèi)存泄露。但是對(duì)于最初提出的5點(diǎn),

當(dāng)前文檔最多預(yù)覽五頁(yè),下載文檔查看全文

此文檔下載收益歸作者所有

當(dāng)前文檔最多預(yù)覽五頁(yè),下載文檔查看全文
溫馨提示:
1. 部分包含數(shù)學(xué)公式或PPT動(dòng)畫的文件,查看預(yù)覽時(shí)可能會(huì)顯示錯(cuò)亂或異常,文件下載后無(wú)此問(wèn)題,請(qǐng)放心下載。
2. 本文檔由用戶上傳,版權(quán)歸屬用戶,天天文庫(kù)負(fù)責(zé)整理代發(fā)布。如果您對(duì)本文檔版權(quán)有爭(zhēng)議請(qǐng)及時(shí)聯(lián)系客服。
3. 下載前請(qǐng)仔細(xì)閱讀文檔內(nèi)容,確認(rèn)文檔內(nèi)容符合您的需求后進(jìn)行下載,若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
4. 下載文檔時(shí)可能由于網(wǎng)絡(luò)波動(dòng)等原因無(wú)法下載或下載錯(cuò)誤,付費(fèi)完成后未能成功下載的用戶請(qǐng)聯(lián)系客服處理。