首頁技術(shù)文章正文

事件委托是什么? JS事件代理的原理

更新時(shí)間:2020-10-20 來源:黑馬程序員 瀏覽量:

引言:

事件委托應(yīng)用在很多開發(fā)場景之中,但是很多同學(xué)對委托的原理、特別是對JS原生實(shí)現(xiàn)委托不太了解。每每看到此情此景我總覺得“眾生皆苦”,正所謂“我不寫文章,誰寫文章”的普渡心態(tài),是以提供這篇文章解救眾生之苦,阿彌陀佛!

釋義

在學(xué)事件委托時(shí),我們有必要先對事件委托做一個(gè)定義。

JS里的事件委托:就是當(dāng)事件觸發(fā)時(shí),把要做的事委托給父元素來處理。

再通俗點(diǎn):就是自己的事不想干,叫它爸爸,甚至爺爺、甚至祖先來干。

作用

在學(xué)它的用法和原理之前,我們先了解一下它的作用,有什么好處。再讓各位決定是否愿意繼續(xù)看下去呢?

作用1:節(jié)約內(nèi)存(哇塞,這個(gè)好這個(gè)棒!)

作用2:能為之后新增的DOM元素依然添加事件(路人甲:這什么鬼?我:死相,真猴急。往后面看就知道了!)

揭開事件委托面紗

場景1:當(dāng)多個(gè)li標(biāo)簽需要添加點(diǎn)擊事件時(shí)

代碼如圖:

事件委托01


代碼解析:

給5個(gè)li標(biāo)簽加了點(diǎn)擊事件,當(dāng)界面上點(diǎn)擊li時(shí),會(huì)打印它們各自li標(biāo)簽顯示的內(nèi)容。

出現(xiàn)的問題:

此時(shí)5個(gè)li,看起來每個(gè)li的點(diǎn)擊事件觸發(fā)時(shí)調(diào)用的都是同一個(gè)函數(shù),即:


function(){
    console.log(this.innerHTML);             
};

但其實(shí)并不是這樣。每個(gè)li綁定的都是一個(gè)全新的函數(shù),只不過每個(gè)函數(shù)的樣子都一毛一樣。

如何驗(yàn)證這個(gè)結(jié)論呢?很簡單,判斷每個(gè)li標(biāo)簽的onclick是否相等就可以了

代碼驗(yàn)證如下:

事件委托02


得到結(jié)果:

事件委托03


至于上面說的函數(shù)長得一樣,但不是同一個(gè)數(shù)據(jù)這種情況就類似于 var obj1 = {name:"jack",age:16}和var obj2 = {name:"jack",age:16},obj1 == obj2 得到的結(jié)果也會(huì)是false(如對這一塊不理解,下次有空再寫一篇文章解答?;蛘邅砗隈R程序員實(shí)地學(xué)習(xí),課程里有講)

至此,我們可以得到結(jié)論,如果有5個(gè)li,那么就有5個(gè)函數(shù)會(huì)被創(chuàng)建在內(nèi)存中占據(jù)空間,那如果有100個(gè)li呢?就會(huì)有100個(gè)長相一毛一樣的函數(shù)在內(nèi)存中常駐,對內(nèi)存的開銷是巨大的!

解決辦法:

利用事件冒泡的原理,把事件加在父元素(ul)身上!

代碼如下:

事件委托04


原理解析:

回顧事件冒泡

事件冒泡:即一個(gè)元素的事件觸發(fā)后,會(huì)依次一級一級往上調(diào)用父級元素的同名事件,直到window(注:IE8和之前的瀏覽器只到document)

例:div > p > span 當(dāng)div和p以及span都添加了click事件,當(dāng)點(diǎn)擊span時(shí),會(huì)依次向上觸發(fā)span、p、div的click事件。

代碼如下:

事件委托05


效果如下:

事件委托06


其中,在每個(gè)觸發(fā)的事件里,通過事件對象.target能拿到 觸發(fā)事件的源頭元素 也就是 事件源。

因此,在上述代碼中,改成

事件委托07


可發(fā)現(xiàn),觸發(fā)事件時(shí),打印出來的e.target都是span,如下:

事件委托08

注:事件對象在ie8中要通過window.event才能取到,因此e = e || window.event是做兼容處理(詳細(xì)了解請翻閱黑馬程序員前端課程關(guān)于事件對象的講解)

解釋委托原理

在回顧完事件冒泡后,我們顯而易見得到結(jié)論:給所有l(wèi)i添加點(diǎn)擊事件,只要加到它們的父元素ul身上的根本原因是利用了事件冒泡。也即:無論點(diǎn)擊哪個(gè)li,都會(huì)自動(dòng)觸發(fā)ul的點(diǎn)擊事件,然后在ul里通過e.target能獲得真正被點(diǎn)擊的那個(gè)li,繼而拿到它的innerHTML

小結(jié):如果給一堆元素加事件,并且事件觸發(fā)時(shí)執(zhí)行的代碼都差不多時(shí),就可以把事件加在父元素身上啦!這樣可以更節(jié)省內(nèi)存空間哦!O(∩_∩)O哈哈~(來自摳腳大漢的賣萌符號)

看,這樣的形式是不是就相當(dāng)于把自己的事件,委托在父元素身上處理了呢?因而它才會(huì)叫事件委托!

也就是:自己的活不干了,給它爹去干!(畫外音:一看就是坑爹的貨~)

存在問題及解決方式

思考:如果ul里還有其他子元素例如span,可我只想給li加點(diǎn)擊事件,用原來寫的事件委托還行嗎?

答案是否定的,因?yàn)楦鶕?jù)事件冒泡原理,所有子元素點(diǎn)擊后都會(huì)觸發(fā)父元素的點(diǎn)擊,因此,如果你點(diǎn)擊了span,也會(huì)調(diào)用ul的點(diǎn)擊事件,這就相當(dāng)于給span也加了點(diǎn)擊事件。這時(shí)候該怎么解決呢?

很簡單,只要判斷一下事件源是不是li就行了,如果是li才執(zhí)行代碼,否則不執(zhí)行,代碼如下:

事件委托09

場景2: 新增元素沒有綁定事件的問題

界面描述:界面上有一個(gè)ul里面默認(rèn)有5個(gè)li,并且還有一個(gè)按鈕,當(dāng)點(diǎn)擊按鈕就創(chuàng)建一個(gè)新的li,需要不管是默認(rèn)有的li還是新的li都有點(diǎn)擊事件。

問題描述:

我們先嘗試不用事件委托普通寫法會(huì)怎么寫,代碼和界面如下:

事件委托
事件委托11


JS部分代碼如下:

此時(shí)會(huì)發(fā)現(xiàn):頁面剛開始加載時(shí)就默認(rèn)存在的5個(gè)li是有點(diǎn)擊事件的,但是點(diǎn)擊按鈕創(chuàng)建出來的li沒有點(diǎn)擊事件。


原因剖析:

因?yàn)樯厦娴腏S代碼是在頁面剛加載時(shí)執(zhí)行的,在當(dāng)時(shí)因?yàn)椴豢赡苋c(diǎn)擊按鈕,所以能找到的li標(biāo)簽只有默認(rèn)那5個(gè),因此你打印liList,發(fā)現(xiàn)也只有5個(gè)

事件委托12


因此,你遍歷liList給每個(gè)元素加點(diǎn)擊事件時(shí),只能給這5個(gè)li加到點(diǎn)擊事件。因此,如果后面再有l(wèi)i標(biāo)簽,也不擁有點(diǎn)擊事件。


使用事件委托解決

代碼如下:

事件委托13


把事件只加在ul身上,即可解決,這樣內(nèi)存占用更低,代碼也少了很多!效果如圖:

事件委托14


我們可以看到,不管是默認(rèn)有的5個(gè)li還是后面才增加的li都有點(diǎn)擊事件了

解析:因?yàn)槭录芭輽C(jī)制的存在,不管是原本有的li還是新創(chuàng)建的li,當(dāng)事件觸發(fā)時(shí)都會(huì)一級一級往上調(diào)用父元素的同名事件。因此,只要是點(diǎn)擊的li標(biāo)簽,都會(huì)觸發(fā)ul的點(diǎn)擊事件,所以只要把事件加在ul身上就解決了不管新舊li標(biāo)簽都有點(diǎn)擊事件的問題。

jQuery里的事件委托

眾所周知,jQuery是JS的一個(gè)偉大的第三方庫(什么?你還不知道?火星了吧!趕緊來黑馬程序員惡補(bǔ)!)。JS有的方法,jQuery里都有,并且代碼寫起來更短。因此事件委托,其實(shí)在jQuery里也存在!

jQuery事件委托語法:

$('父元素').on('事件名','哪個(gè)子元素觸發(fā)',傳給回調(diào)函數(shù)的參數(shù),事件觸發(fā)時(shí)的回調(diào)函數(shù));

解釋:

參數(shù)1:事件名,代表要綁定什么事件,但是記得不用加on,也就是說如果你想加點(diǎn)擊事件,只要寫'click'即可,注意是字符串!所以要打單引號或者雙引號

參數(shù)2:只能由哪個(gè)子元素觸發(fā),例如我寫 "li",就代表只能由這個(gè)父元素里面的li觸發(fā)事件,其他子元素不會(huì)觸發(fā)。需要注意的是,這也是字符串,并且,參數(shù)2可以不寫,那就代表僅僅只是給父元素加一個(gè)點(diǎn)擊事件,并且所有子元素都能觸發(fā)到這個(gè)事件(因?yàn)槭录芭?

參數(shù)3:其實(shí)一般不會(huì)用,就是如果想事件觸發(fā)時(shí),自己給回調(diào)函數(shù)傳一些值就寫,這個(gè)參數(shù)也可以不寫!

參數(shù)4:事件觸發(fā)時(shí)的回調(diào)函數(shù)

總結(jié):參數(shù)1和參數(shù)4是必須的,其他是可選的,如果你要用事件委托,請寫上參數(shù)2

例:

事件委托14


說明:

1.on這個(gè)方法的參數(shù)3可以通過回調(diào)函數(shù)里的e.data拿到(但一般不會(huì)用,大家了解一下有這么個(gè)東西即可)

2.在jQuery事件委托的回調(diào)函數(shù)里this和e.target是同一個(gè)東西,但是在JS里this和e.target不是同一個(gè)東西(有興趣可以參考以前的文章或者黑馬程序員前端課程)

一般參數(shù)3不會(huì)寫,因此代碼常見會(huì)寫成這樣:

事件委托15

結(jié)語

其實(shí)在其他語言里,事件委托會(huì)比較復(fù)雜,需要?jiǎng)?chuàng)建額外對象。但是由于JS的靈活性,使得在JS里僅僅只需要把事件綁定在父元素即可實(shí)現(xiàn)。

事件委托雖然在面試題中略微少見,但是在實(shí)際開發(fā)中幾乎都會(huì)用到。因?yàn)橛袝r(shí)候需要給某一類元素加事件(例如給所有l(wèi)i加點(diǎn)擊事件),因?yàn)榫W(wǎng)頁內(nèi)容經(jīng)常改變,這類元素隨時(shí)會(huì)增加或者減少,為了保證所有這類元素都有事件,也為了節(jié)約內(nèi)存,所以都需要采用事件委托才可實(shí)現(xiàn)!

最后含著淚,摳著腳跟大伙say byebye,我們下期再見~!


猜你喜歡:

前端touch事件方向的判斷

BFC布局規(guī)則介紹,哪些元素會(huì)生成BFC?

傳智播客web前端培訓(xùn)課程 

黑馬程序員web前端培訓(xùn)課程 

分享到:
在線咨詢 我要報(bào)名
和我們在線交談!