JavaScript中事件委托的示例詳解

更新時(shí)間：2022年07月19日 08:14:52 作者：前端西瓜哥

所謂事件委托，就是將原本應(yīng)該在當(dāng)前元素綁定的事件，放到它的祖先元素上，讓祖先元素來委托處理。今天我們來認(rèn)識一下JS中的事件委托

事件流

事件流指從頁面中接收事件的順序，也可理解為事件在頁面中傳播的順序。

事件流由兩階段組成：

捕獲事件
冒泡事件

我們通常用 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)前的事件對象。

第三個(gè)參數(shù)是可選的，表示監(jiān)聽的是否為捕獲階段，false為冒泡階段，也是默認(rèn)值，true 為捕獲階段。我們常用的是冒泡階段。

當(dāng)我們點(diǎn)擊元素時(shí)，就會執(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 就會產(chǎn)生事件流。

事件流首先會進(jìn)入 捕獲階段，從根節(jié)點(diǎn)往目標(biāo)元素（div#card）移動，依次經(jīng)過為：

window
document（文檔根元素，在 HTML 中沒有顯式聲明）
document.documentElement（<html> ）
document.body（<body>）
...
目標(biāo)元素 div#card

和調(diào)用事件對象的 event.composedPath() 方法拿到的 事件路徑 類似。

window 看起來是個(gè)全局變量，但它也是可以綁定事件的，比如窗口大小改變的 resize 事件就只能綁定到 window 上，而不能綁定到 document 上。

然后再執(zhí)行 冒泡階段，然后反著再經(jīng)過一遍這些節(jié)點(diǎn)。

我們會根據(jù)事件流經(jīng)過的順序，依次執(zhí)行這些節(jié)點(diǎn)上綁定的對應(yīng)事件函數(shù)。

事件委托

假如我有一個(gè)好友列表，我希望點(diǎn)擊 “聊天” 按鈕，拿到對應(yīng)用戶 id，創(chuàng)建并進(jìn)入到對應(yīng)用戶的聊天會話中。

<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á)上千上萬個(gè)，就需要聲明相當(dāng)多的事件函數(shù)，比較消耗內(nèi)存。而且 如果列表經(jīng)常發(fā)生動態(tài)變更，也會導(dǎo)致大量事件監(jiān)聽的移除和綁定。

在這種情況下，事件委托就大有可為了。

事件委托正是利用事件流的冒泡特性，將本來要綁定到多個(gè)元素的事件函數(shù)，委托到了其祖先元素上。

在上面這個(gè)例子中，我們可以將事件綁定到 ul 節(jié)點(diǎn)上，執(zhí)行函數(shù)時(shí)，通過 event 對象拿到必要的信息，進(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);
  }
});

通過 event.target 我們能獲得這次事件流的目標(biāo)節(jié)點(diǎn)，然后從該節(jié)點(diǎn)對象中提取出需要的信息。

在這里我們需要拿到用戶 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ù)就夠了。