JavaScript事件委托（事件代理）定义事件由于冒泡阶段从下往向上传播到上层节点，因此可以把子节点的监听函数定义在

定义

事件由于冒泡阶段从下往向上传播到上层节点，因此可以把子节点的监听函数定义在上层节点上，由上层节点的监听函数统一处理多个子元素的事件。这叫做事件委托。

举个例子可以理解为，暑假家里有很多孩子来玩，如果让他们自己一个一个去买面包吃，那就麻烦不方便。最好的方法是委托一个家长，统一去买好面包，回来再按照需要分配给不同的孩子。

优点

那么就不必为每个元素分配一个监听函数 —— 而是将单个监听函数放在它们的共同上层节点上。减少内存消耗，提高性能。

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item 99</li>
</ul>

var ul = document.querySelector('ul');

ul.addEventListener('click', function (event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    alert('li')
  }
});

假设列表有很多li元素，如果一个一个监听将会很消耗资源，可以通过事件委托的办法，监听函数定义在上层节点，统一处理子节点的事件。