摘要:但是這樣并不能實(shí)際使用,因?yàn)橛脕肀4媸录臄?shù)組當(dāng)前是作為一個全局變量。請先使用綁定事件。在使用時傳入三個參數(shù),元素,事件類型,回調(diào)方法,即可。
讓我們回到還沒有DOM2級事件方法的年代,那時候,我們想給某元素綁定一個事件方法時,是這樣做的:
javascriptvar ele=document.getElementById("main"); ele.onclick=function(){ console.log("做一件事"); }
這就是DOM0級事件方法,我們需要用XXX.onYYY=ZZZ這種形式來綁定事件,當(dāng)點(diǎn)擊元素時,會輸出“做一件事”,恩,很理想。
接下來,當(dāng)我們希望在點(diǎn)擊該元素的時候再做另一件事怎么辦呢?下面這樣:
javascriptele.onclick=function(){ console.log("做第二件事"); }
這樣肯定不行,因?yàn)槲覀兪窍Mc(diǎn)擊時既輸出“做一件事”,又要輸出“做第二件事”。而這樣的話后面的方法將前面的覆蓋掉了,因?yàn)閄XX.onYYY=ZZZ只能給元素的某個事件類型(如例子中的click事件)綁定一個方法ZZZ;這個問題難不到我們,既然這樣,那我們就把要做的事情全都放在ZZZ里不就行了么;
javascriptfunction fn1(){ console.log("做一件事"); } function fn2(){ console.log("做第二件事"); } ele.onclick=function(){ fn1(); fn2(); }
接下來,挑戰(zhàn)來了,那如果我們是希望在點(diǎn)擊元素時做100件不同的事情呢?難道也是這樣用XXX.onYYY=ZZZ形式,將100個方法都在ZZZ里依次執(zhí)行嗎?顯然這是很笨的方法;動一下腦筋,很快想到另一個解決方案:
明確以下需求,我們是希望在點(diǎn)擊事件發(fā)生時,執(zhí)行多個方法,而具體有多少個,一開始時不明確的,那么我們可以用一個數(shù)組來保存所有的回調(diào)方法;當(dāng)點(diǎn)擊發(fā)生時,執(zhí)行一個方法,在這個方法中依次執(zhí)行數(shù)組中的回調(diào)方法。
javascriptvar arr=[]; ele.onclick=function(){ for(var i=0;iele.eventList=[]; ele.onclick=function(){ for(var i=0;i 這樣的話,當(dāng)我們需要給元素點(diǎn)擊事件添加更多的方法時,直接往數(shù)組arr中push更多的回調(diào)方法就行了,甚至當(dāng)我們希望去掉某個方法,也可以通過刪除數(shù)組中的某項(xiàng)來完成。
但是這樣并不能實(shí)際使用,因?yàn)橛脕肀4媸录臄?shù)組當(dāng)前是作為一個全局變量。為了持久化保存這個數(shù)組,我們可以這樣,將這個數(shù)組定義為元素節(jié)點(diǎn)對象的某一個屬性,就像下面這樣:javascriptfunction bind(ele,ev,callback){ if(!ele.ev){ ele.ev=[];//直接將保存某個事件類型所有回調(diào)方法的數(shù)組命名為事件類型 ele["on"+ev]=function(){ for(var i=0;i 以上代碼只是針對click事件,在實(shí)際運(yùn)用時,有各種不同的事件類型;在某個類型事件觸發(fā)時,需要執(zhí)行所有綁定到該類型事件的方法,因此,針對每個事件類型,都要采用一個數(shù)組來保存相應(yīng)回調(diào)方法。
另外,為了在某類型事件觸發(fā)時,找到針對與該事件類型的所有方法并執(zhí)行,我們可以將這個數(shù)組直接以事件類型名稱命名;
然后考慮將以上方法用一個函數(shù)封裝起來:如下javascriptfunction bind(ele,ev,callback){ if(!ele.ev){ ele.ev=[]; ele["on"+ev]=function(){ //只需要綁定一次 for(var i=0;i 為了防止重復(fù)綁定,在將回調(diào)函數(shù)push進(jìn)事件隊(duì)列數(shù)組時,首先需要判斷被綁定的回調(diào)是否已經(jīng)存在于事件隊(duì)列中;
javascriptfunction bind(ele,ev,callback){ if(!ele._event){ ele._event={}; } if(!ele._event[ev]){ ele._event[ev]=[]; ele["on"+ev]=function(e){ e=e||window.event; var eList=ele._event[ev]; for(var i=0;i 而相應(yīng)unbind方法,只需要將需要解綁的回調(diào)函數(shù)從相應(yīng)的函數(shù)隊(duì)列中刪除即可;
另外還有以下一個問題:上述這種情況下,綁定了幾個類型的事件,就會給ele多添加幾個屬性,命名空間污染極其嚴(yán)重;所以采用的方案是在元素上只添加一個屬性(如_event),然后所有的事件隊(duì)列全都擴(kuò)展在這個屬性上。全部代碼如下:
完整版代碼javascript在使用時傳入三個參數(shù),元素,事件類型,回調(diào)方法,即可。解綁時傳入同樣的三個參數(shù);這個簡單的方案解決了以下問題:
this關(guān)鍵字指向問題
重復(fù)綁定問題
執(zhí)行順序問題
以上,我們就完成了一個粗糙的事件系統(tǒng),它的思想很類似于Dean Edward在其發(fā)布的addEvent.js中的實(shí)現(xiàn)方式;
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/85866.html
摘要:而由于級標(biāo)準(zhǔn)中并沒有定義事件相關(guān)的內(nèi)容,所以事件級別只包括級,級和級三種。此屬性返回當(dāng)前事件所綁定的對象。自定義事件可以綁定到任意元素上,此處選擇只是為了演示方便。 前端學(xué)習(xí)的東西有很多,現(xiàn)代前端開發(fā),前端工程化的東西要懂,基礎(chǔ)的原生js也要懂,畢竟,框架都是有生命周期的,更替非???,然而卻有這么一個框架,它是最輕量的前端框架,每個瀏覽器都內(nèi)置,它叫vanilla.js。好吧,其實(shí)va...
摘要:事件相關(guān)內(nèi)容當(dāng)用戶與瀏覽器發(fā)生的一些交互時如果希望去獲得用戶行為就需要借助事件來完成事件部分內(nèi)容在中重要性不言而喻羅列需要了解與事件相關(guān)的知識如下這也是面試中遇到的問題事件的級別事件模型事件流事件處理程序描述事件捕獲冒泡的具體流程對象常見的 DOM事件相關(guān)內(nèi)容 當(dāng)用戶與瀏覽器發(fā)生的一些交互時, 如果希望去獲得用戶行為, 就需要借助事件來完成. 事件部分內(nèi)容在 JS中重要性不言而喻. ...
摘要:事件相關(guān)內(nèi)容當(dāng)用戶與瀏覽器發(fā)生的一些交互時如果希望去獲得用戶行為就需要借助事件來完成事件部分內(nèi)容在中重要性不言而喻羅列需要了解與事件相關(guān)的知識如下這也是面試中遇到的問題事件的級別事件模型事件流事件處理程序描述事件捕獲冒泡的具體流程對象常見的 DOM事件相關(guān)內(nèi)容 當(dāng)用戶與瀏覽器發(fā)生的一些交互時, 如果希望去獲得用戶行為, 就需要借助事件來完成. 事件部分內(nèi)容在 JS中重要性不言而喻. ...
摘要:而事件分為個級別級事件處理程序,級事件處理程序和級事件處理程序。級中沒有規(guī)范事件的相關(guān)內(nèi)容,所以沒有級事件處理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript來實(shí)現(xiàn)用戶與WEB網(wǎng)頁之間的動態(tài)交互,接收用戶操作并做出相應(yīng)的反饋,而事件在此間則充當(dāng)橋梁的重要角色。 日常開發(fā)中,經(jīng)常會...
閱讀 737·2021-08-17 10:11
閱讀 1600·2019-08-30 11:15
閱讀 1025·2019-08-26 13:54
閱讀 3511·2019-08-26 11:47
閱讀 1224·2019-08-26 10:20
閱讀 2825·2019-08-23 18:35
閱讀 1220·2019-08-23 17:52
閱讀 1302·2019-08-23 16:19