事件委託，你如何理解？ 【前端每日一題-28】

談談你對事件委託的理解，它有什麼好處？寫一個簡單的示例。

一句話解釋事件委託

利用事件冒泡機制處理指定一個事件處理程序，來管理某一類型的全部事件。

事件委託的好處

• 利用冒泡的原理，將事件加到父級身上，觸發執行效果，這樣只在內存中開闢一塊空間，既節省資源又減小DOM操做，提升性能
• 能夠爲動態添加的元素綁定事件

案例

<ul id="ul">
  <li>111111</li>
  <li>222222</li>
  <li>333333</li>
</ul>
<button id="button">添加元素</button>

<script>
  let domUl = document.querySelector('#ul');
  let domButton = document.querySelector('#button');
  function handleUlClick(e) {
    //這裏暫不考慮IE兼容
    if (e.target.nodeName.toLowerCase() === 'li') {
      console.log(e.target.innerText);
      e.target.style.background = 'red';
    }
  }
  domUl.addEventListener('click', handleUlClick);

  domButton.addEventListener('click', function() {
    let newLi = document.createElement('li');
    newLi.innerText = 'newnewnew';
    domUl.append(newLi);
  });
</script>
複製代碼