弄懂事件委託

• 2019 年 12 月 5 日
• 筆記

事件委託，也叫事件委派，事件代理。

當構建應用程式時，有時需要將事件監聽器綁定到頁面上的某些元素上，以便在用戶與元素交互時執行某些操作。

假設我們現在有一個無序列表：

<ul id="todo-app">    <li class="item">Walk the dog</li>    <li class="item">Pay bills</li>    <li class="item">Make dinner</li>    <li class="item">Code for one hour</li>  </ul>

我們需要在 <li>上綁定點擊事件，我們可能會這樣操作：

app = document.getElementById('todo-app');  let items = app.getElementsByClassName('item');    // 將事件偵聽器綁定到每個列表項  for (let item of items) {    item.addEventListener('click', function() {      alert('you clicked on item: ' + item.innerHTML);    });  }

雖然這樣可以實現功能，但問題是要單獨將事件偵聽器綁定到每個列表項。這是4個元素，沒什麼大問題，但如果列表中有10,000個事項，怎麼辦？這個函數將會創建10,000個獨立的事件監聽器，並將每個事件監聽器綁定到 DOM 。這樣程式碼執行的效率非常低下。

更高效的解決方案是將一個事件偵聽器實際綁定到父容器 <ul>上，然後在實際單擊時可以訪問每個確切元素。這被稱為事件委託，並且它比每個元素單獨綁定事件的處理程式更高效。

那麼上面的程式碼可以改變為：

let app = document.getElementById('todo-app');    // 事件偵聽器綁定到整個容器上  app.addEventListener('click', function(e) {    if (e.target && e.target.nodeName === 'LI') {      let item = e.target;      alert('you clicked on item: ' + item.innerHTML);    }  });