大家好，我是IT修真院成都分院第09期學(xué)員。今天分享的內(nèi)容是JS中的event delegate，什么是event delegate（事件委托）？

1.背景介紹

事件處理程序可以為現(xiàn)代web應(yīng)用程序提供交互能力，因此許多開發(fā)人員會向頁面中添加大量的處理程序。

但是在JavaScript中，添加到頁面中的事件處理程序的數(shù)量會直接影響頁面的整體運(yùn)行性能。

理由：1.每個(gè)函數(shù)都是對象，都會占用內(nèi)存。

2.事先指定所有的事件處理程序會導(dǎo)致DOM的訪問次數(shù)增加，會延遲整個(gè)頁面的交互時(shí)間。 對“事件處理程序過多”問題的解決方案就是事件委托（Delegation）。

2.知識剖析

2.1為什么要用事件委托

在JavaScript中，添加到頁面上的事件處理程序數(shù)量將直接關(guān)系到頁面的整體運(yùn)行性能， 因?yàn)樾枰粩嗟呐cdom節(jié)點(diǎn)進(jìn)行交互，訪問dom的次數(shù)越多，引起瀏覽器重繪與重排的次數(shù)也就越多， 就會延長整個(gè)頁面的交互就緒時(shí)間，這就是為什么性能優(yōu)化的主要思想之一就是減少DOM操作的原因；

每個(gè)函數(shù)都是一個(gè)對象，是對象就會占用內(nèi)存，對象越多，內(nèi)存占用率越大，100個(gè)li就要占用100個(gè)內(nèi)存空間。 如果要用事件委托，就會將所有的操作放到j(luò)s程序里面，只對它的父級(如果只有一個(gè)父級)這一個(gè)對象進(jìn)行操作， 與dom的操作就只需要交互一次，這樣就能大大的減少與dom的交互次數(shù)，提高性能；

事件委托的原理

事件委托是利用事件的冒泡原理來實(shí)現(xiàn)的，何為事件冒泡呢？

就是事件從最深的節(jié)點(diǎn)開始，然后逐步向上傳播事件，

舉個(gè)例子：

頁面上有這么一個(gè)節(jié)點(diǎn)樹，div>ul>li>a;比如給最里面的a加一個(gè)click點(diǎn)擊事件， 那么這個(gè)事件就會一層一層的往外執(zhí)行，執(zhí)行順序a>li>ul>div， 有這樣一個(gè)機(jī)制，那么我們給最外面的div加點(diǎn)擊事件，那么里面的ul，li，a做點(diǎn)擊事件的時(shí)候， 都會冒泡到最外層的div上，所以都會觸發(fā)，這就是事件委托，委托它們父級代為執(zhí)行事件。

子節(jié)點(diǎn)實(shí)現(xiàn)功能的例子：

我們看看有多少次的dom操作，首先要找到ul，然后遍歷li，然后點(diǎn)擊li的時(shí)候，又要找一次目標(biāo)的li的位置，才能執(zhí)行最后的操作，每次點(diǎn)擊都要找一次li；

委托的方式做又如何呢：

3.事件冒泡及捕獲

? ? DOM2.0模型將事件處理流程分為三個(gè)階段：

一、事件捕獲階段，

二、事件目標(biāo)階段，

三、事件起泡階段。

? ?

事件捕獲：

當(dāng)某個(gè)元素觸發(fā)某個(gè)事件（如onclick），頂層對象document就會發(fā)出一個(gè)事件流，

隨著DOM樹的節(jié)點(diǎn)向目標(biāo)元素節(jié)點(diǎn)流去，直到到達(dá)事件真正發(fā)生的目標(biāo)元素。

在這個(gè)過程中，事件相應(yīng)的監(jiān)聽函數(shù)是不會被觸發(fā)的。

? ? ? ? 事件目標(biāo)：

當(dāng)?shù)竭_(dá)目標(biāo)元素之后，執(zhí)行目標(biāo)元素該事件相應(yīng)的處理函數(shù)。如果沒有綁定監(jiān)聽函數(shù)，那就不執(zhí)行。

? ? ? ? 事件起泡：

從目標(biāo)元素開始，往頂層元素傳播。途中如果有節(jié)點(diǎn)綁定了相應(yīng)的事件處理函數(shù)，這些函數(shù)都會被觸發(fā)

? ? ? ? 2.4事件委托的優(yōu)點(diǎn)

通過剛才的對比介紹，大家應(yīng)該能夠體會到使用事件委托對于web應(yīng)用程序帶來的幾個(gè)優(yōu)點(diǎn)：

1.管理的函數(shù)變少了。不需要為每個(gè)元素都添加監(jiān)聽函數(shù)。對于同一個(gè)父節(jié)點(diǎn)下面類似的子元素，可以通過委托給父元素的監(jiān)聽函數(shù)來處理事件。

2.可以方便地動態(tài)添加和修改元素，不需要因?yàn)樵氐母膭佣薷氖录壎ā?/p>

3.JavaScript和DOM節(jié)點(diǎn)之間的關(guān)聯(lián)變少了，這樣也就減少了因循環(huán)引用而帶來的內(nèi)存泄漏發(fā)生的概率。

3、常見問題

如果我想讓事件代理的效果跟直接給節(jié)點(diǎn)的事件效果一樣怎么辦?

比如說只有點(diǎn)擊li才會觸發(fā)?

? ? ?? Event對象提供了一個(gè)屬性叫target，可以返回事件的目標(biāo)節(jié)點(diǎn)，

我們成為事件源， 也就是說，target就可以表示為當(dāng)前的事件操作的dom，但是不是真正操作dom。

標(biāo)準(zhǔn)瀏覽器用ev.target，IE瀏覽器用event.srcElement，此時(shí)只是獲取了當(dāng)前節(jié)點(diǎn)的位置， 并不知道是什么節(jié)點(diǎn)名稱，這里我們用nodeName來獲取具體是什么標(biāo)簽名。

這樣改下就只有點(diǎn)擊li會觸發(fā)事件了，且每次只執(zhí)行一次dom操作

5.擴(kuò)展思考

事件對象的公共成員：

對比currentTarget和target

6.參考文獻(xiàn)

鳴謝

感謝大家觀看！

------------------------------------------------------------------------------------------------------------------------

技能樹.IT修真院

“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開始，找個(gè)師兄，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷茫”。

這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化，成長可見化，師兄1對1免費(fèi)指導(dǎo)?？靵砼c我一起學(xué)習(xí)吧 ！