事件委托，你如何理解？ 【前端每日一题-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>
复制代码