大家好转培，我是IT修真院上海分院第01期學員谷市，一枚正直善良的web程序員。

今天給大家分享一下狐树，修真院官網(wǎng) JS任務(wù)中可能會使用到的知識點：

JS中的事件委托和事件代理

什么是事件委托作谚？

事件委托還有一個名字叫事件代理三娩，JS高程上講：事件委托就是利用事件冒泡，只制定一個時間處理程序妹懒，就可以管理某一類型的所有事件雀监。我用取快遞來解釋這個現(xiàn)象： 有三個同事預計會在周一收到快遞。為簽收快遞眨唬，有兩種辦法：一是三個人在公司門口等快遞会前；二是委托給前臺代為簽收。現(xiàn)實當中匾竿，我們大都采用委托的方案瓦宜。前臺收到快遞后，她會判斷收件人是誰岭妖，然后按照收件人的要求簽收临庇，甚至代為付款。這種方案還有一個優(yōu)勢昵慌，那就是即使公司里來了新員工（不管多少）假夺，前臺也會在收到寄給新員工的快遞后核實并代為簽收。

一斋攀、背景介紹

這里其實還有2層意思的：

第一已卷，現(xiàn)在委托前臺的同事是可以代為簽收的，即程序中的現(xiàn)有的dom節(jié)點是有事件的淳蔼；

第二侧蘸，新員工也是可以被前臺代為簽收的裁眯，即程序中新添加的dom節(jié)點也是有事件的。

二讳癌、知識剖析

2.1為什么要用事件委托

在JavaScript中未状，添加到頁面上的事件處理程序數(shù)量將直接關(guān)系到頁面的整體運行性能，因為需要不斷的與dom節(jié)點進行交互析桥，訪問dom的次數(shù)越多，引起瀏覽器重繪與重排的次數(shù)也就越多艰垂，就會延長整個頁面的交互就緒時間泡仗，這就是為什么性能優(yōu)化的主要思想之一就是減少DOM操作的原因；每個函數(shù)都是一個對象猜憎，是對象就會占用內(nèi)存娩怎，對象越多，內(nèi)存占用率越大胰柑，100個li就要占用100個內(nèi)存空間截亦。如果要用事件委托，就會將所有的操作放到j(luò)s程序里面柬讨，只對它的父級(如果只有一個父級)這一個對象進行操作崩瓤，與dom的操作就只需要交互一次，這樣就能大大的減少與dom的交互次數(shù)踩官，提高性能却桶；

2.2事件委托的原理

事件委托是利用事件的冒泡原理來實現(xiàn)的，何為事件冒泡呢蔗牡？就是事件從最深的節(jié)點開始颖系，然后逐步向上傳播事件，舉個例子：頁面上有這么一個節(jié)點樹辩越，div>ul>li>a;比如給最里面的a加一個click點擊事件嘁扼，那么這個事件就會一層一層的往外執(zhí)行，執(zhí)行順序a>li>ul>div黔攒，有這樣一個機制趁啸，那么我們給最外面的div加點擊事件，那么里面的ul亏钩，li莲绰，a做點擊事件的時候，都會冒泡到最外層的div上姑丑，所以都會觸發(fā)蛤签，這就是事件委托，委托它們父級代為執(zhí)行事件栅哀。

子節(jié)點實現(xiàn)相同的功能：實現(xiàn)功能是點擊li震肮，彈出123

我們看看有多少次的dom操作称龙，首先要找到ul，然后遍歷li戳晌，然后點擊li的時候鲫尊，又要找一次目標的li的位置，才能執(zhí)行最后的操作沦偎，每次點擊都要找一次li疫向；

子節(jié)點實現(xiàn)相同的功能：實現(xiàn)功能是點擊li，彈出123

那么我們用事件委托的方式做又會怎么樣呢豪嚎？

這里用父級ul做事件處理搔驼，當li被點擊時，由于冒泡原理侈询，事件就會冒泡到ul上舌涨，因為ul上有點擊事件，所以事件就會觸發(fā)扔字，當然囊嘉，這里當點擊ul的時候，也是會觸發(fā)的.

2.3 事件冒泡及捕獲

DOM2.0模型將事件處理流程分為三個階段：一革为、事件捕獲階段扭粱，二、事件目標階段震檩，三焊刹、事件起泡階段。如圖：

事件捕獲：當某個元素觸發(fā)某個事件（如onclick）恳蹲，頂層對象document就會發(fā)出一個事件流虐块，隨著DOM樹的節(jié)點向目標元素節(jié)點流去，直到到達事件真正發(fā)生的目標元素嘉蕾。在這個過程中贺奠，事件相應的監(jiān)聽函數(shù)是不會被觸發(fā)的。 事件目標：當?shù)竭_目標元素之后错忱，執(zhí)行目標元素該事件相應的處理函數(shù)儡率。如果沒有綁定監(jiān)聽函數(shù)，那就不執(zhí)行以清。 事件起泡：從目標元素開始儿普，往頂層元素傳播。途中如果有節(jié)點綁定了相應的事件處理函數(shù)掷倔，這些函數(shù)都會被觸發(fā)眉孩。

2.4事件委托的優(yōu)點

通過剛才的對比介紹，大家應該能夠體會到使用事件委托對于web應用程序帶來的幾個優(yōu)點： 1.管理的函數(shù)變少了。不需要為每個元素都添加監(jiān)聽函數(shù)浪汪。對于同一個父節(jié)點下面類似的子元素巴柿，可以通過委托給父元素的監(jiān)聽函數(shù)來處理事件。 2.可以方便地動態(tài)添加和修改元素死遭，不需要因為元素的改動而修改事件綁定广恢。 3.JavaScript和DOM節(jié)點之間的關(guān)聯(lián)變少了，這樣也就減少了因循環(huán)引用而帶來的內(nèi)存泄漏發(fā)生的概率呀潭。

3.常見問題

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

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

4.解決方案

Event對象提供了一個屬性叫target钉迷，可以返回事件的目標節(jié)點，我們成為事件源钠署，也就是說篷牌，target就可以表示為當前的事件操作的dom，但是不是真正操作dom踏幻。標準瀏覽器用ev.target，IE瀏覽器用event.srcElement戳杀，此時只是獲取了當前節(jié)點的位置该面，并不知道是什么節(jié)點名稱，這里我們用nodeName來獲取具體是什么標簽名信卡。這樣改下就只有點擊li會觸發(fā)事件了隔缀，且每次只執(zhí)行一次dom操作

5.編碼實戰(zhàn)

現(xiàn)在講的都是document加載完成的現(xiàn)有dom節(jié)點下的操作，那么如果是新增的節(jié)點傍菇，新增的節(jié)點會有事件嗎猾瘸？現(xiàn)在是移入li，li變紅丢习，移出li牵触，li變白，這么一個效果咐低，然后點擊按鈕揽思，可以向ul中添加一個li子節(jié)點

我們可以發(fā)現(xiàn)，當用事件委托的時候见擦，根本就不需要去遍歷元素的子節(jié)點钉汗，只需要給父級元素添加事件就好了，其他的都是在js里面的執(zhí)行鲤屡，這樣可以大大的減少dom操作损痰，這才是事件委托的精髓所在。

什么樣的事件可以用事件委托酒来，什么樣的事件不可以用呢卢未？ 適合用事件委托的事件：click，mousedown堰汉，mouseup尝丐，keydown显拜，keyup，keypress爹袁。（所有用到按鈕的事件远荠，多數(shù)的鼠標事件和鍵盤事件） 值得注意的是，mouseover和mouseout雖然也有事件冒泡失息，但是處理它們的時候需要特別的注意譬淳，因為需要經(jīng)常計算它們的位置，處理起來不太容易盹兢。 不適合的就有很多了邻梆，舉個例子，mousemove绎秒，每次都要計算它的位置浦妄，非常不好把控，在不如說focus见芹，blur之類的剂娄，本身就沒用冒泡的特性，自然就不能用事件委托了玄呛。

七阅懦、擴展思考

參考一：陳鑫偉的博客

參考二：tony1223

八、視頻鏈接

技能樹.IT修真院

“我們相信人人都可以成為一個工程師徘铝，現(xiàn)在開始耳胎，找個師兄，帶你入門惕它，掌控自己學習的節(jié)奏怕午，學習的路上不再迷茫”淹魄。

這里是技能樹.IT修真院诗轻，成千上萬的師兄在這里找到了自己的學習路線，學習透明化揭北，成長可見化扳炬，師兄1對1免費指導搔体『拚粒快來與我一起學習吧?！

感謝大家的閱讀劝术！