JS 中的事件委托是什么
大家好，我是前端西瓜哥。今天我們來(lái)認(rèn)識(shí)一下事件委托。
所謂事件委托，就是將原本應(yīng)該在當(dāng)前元素綁定的事件，放到它的祖先元素上，讓祖先元素來(lái)委托處理。
事件流
事件流指從頁(yè)面中接收事件的順序，也可理解為事件在頁(yè)面中傳播的順序。
事件流由兩階段組成：
- 捕獲事件
- 冒泡事件
我們通常用 addEventListener 給元素添加事件：
document.querySelector('#card')addEventListener( 'click', function (event) { console.log('div#card 冒泡點(diǎn)擊', event); }, false);
第一個(gè)參數(shù)是事件名，第二個(gè)參數(shù)是事件響應(yīng)函數(shù)，可以拿到當(dāng)前的事件對(duì)象。
第三個(gè)參數(shù)是可選的，表示監(jiān)聽的是否為捕獲階段，false為冒泡階段，也是默認(rèn)值，true 為捕獲階段。我們常用的是冒泡階段。
當(dāng)我們點(diǎn)擊元素時(shí)，就會(huì)執(zhí)行這個(gè)函數(shù)。
假設(shè)我們的 DOM 結(jié)構(gòu)如下：
<html> <head> <title>前端西瓜哥</title> <meta charset="UTF-8" /> </head> <body> <div id="app"> <div id="box-1"> <div id="card">card</div> </div> <div id="box-2"></div> </div> </body></html>
現(xiàn)在我們點(diǎn)擊 card 文字時(shí)，DOM 就會(huì)產(chǎn)生事件流。
事件流首先會(huì)進(jìn)入 捕獲階段，從根節(jié)點(diǎn)往目標(biāo)元素（div#card）移動(dòng)，依次經(jīng)過(guò)為：
- window
- document（文檔根元素，在 HTML 中沒有顯式聲明）
- document.documentElement（<html>）
- document.body（<body>）
- ...
- 目標(biāo)元素 div#card
和調(diào)用事件對(duì)象的 event.composedPath() 方法拿到的 事件路徑 類似。
window 看起來(lái)是個(gè)全局變量，但它也是可以綁定事件的，比如窗口大小改變的 resize 事件就只能綁定到 window 上，而不能綁定到 document 上。
然后再執(zhí)行 冒泡階段，然后反著再經(jīng)過(guò)一遍這些節(jié)點(diǎn)。
我們會(huì)根據(jù)事件流經(jīng)過(guò)的順序，依次執(zhí)行這些節(jié)點(diǎn)上綁定的對(duì)應(yīng)事件函數(shù)。
事件委托
假如我有一個(gè)好友列表，我希望點(diǎn)擊 “聊天” 按鈕，拿到對(duì)應(yīng)用戶 id，創(chuàng)建并進(jìn)入到對(duì)應(yīng)用戶的聊天會(huì)話中。
<ul> <li>前端西瓜哥<button>聊天</button></li> <li>fe_watermelon<button>聊天</button></li> <!-- ... --> <li>老王<button>聊天</button></li></ul>
最直接的方式是給所有的 button 元素都綁定各自的事件。
節(jié)點(diǎn)少的時(shí)候還好，如果節(jié)點(diǎn)多達(dá)上千上萬(wàn)個(gè)，就需要聲明相當(dāng)多的事件函數(shù)，比較消耗內(nèi)存。而且 如果列表經(jīng)常發(fā)生動(dòng)態(tài)變更，也會(huì)導(dǎo)致大量事件監(jiān)聽的移除和綁定。
在這種情況下，事件委托就大有可為了。
事件委托正是利用事件流的冒泡特性，將本來(lái)要綁定到多個(gè)元素的事件函數(shù)，委托到了其祖先元素上。
在上面這個(gè)例子中，我們可以將事件綁定到 ul 節(jié)點(diǎn)上，執(zhí)行函數(shù)時(shí)，通過(guò) event 對(duì)象拿到必要的信息，進(jìn)行統(tǒng)一的操作。
document.querySelector('ul').addEventListener('click', (event) => { const target = event.target; const userId = target.getAttribute('data-user-id'); if (userId) { joinChat(userId); }});
通過(guò) event.target 我們能獲得這次事件流的目標(biāo)節(jié)點(diǎn)，然后從該節(jié)點(diǎn)對(duì)象中提取出需要的信息。
在這里我們需要拿到用戶 id，所以需要給 button 元素添加類似 data-user-id 的自定義屬性，像這樣子：
<ul> <li>前端西瓜哥<button data-user-id="5">聊天</button></li> <li>fe_watermelon<button data-user-id="99">聊天</button></li> <!-- ... --> <li>老王<button data-user-id="63">聊天</button></li></ul>
這樣，不管 li 有多少，更新多頻繁，我們只需要維護(hù)一個(gè)函數(shù)就夠了。
結(jié)尾
事件委托，其實(shí)就是將原本應(yīng)該綁定在子元素的的大量類似的事件監(jiān)聽函數(shù)，改為綁定到父元素或祖先元素上，委托祖先元素來(lái)處理。
不過(guò)在實(shí)際開發(fā)中，需要用到事件為委托的場(chǎng)景還是比較少，因?yàn)槲覀兊牧斜硗ǔ２粫?huì)太長(zhǎng)。
