事件委托 | 青训营笔记

这是我在最后一次班会上老师询问前端常考的面试题的时候，我去找的，其中事件委托刚好是我最近接触了，所以分享一下。

什么是事件委托

事件委托（delegate）也称为事件托管或事件代理，就是把目标节点的事件绑定到祖先节点上。事件委托是JavaScript中常用绑定事件的常用技巧。它可以减少重复工作，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的；所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。

如何使用

使用事件委托，只需要为父元素绑定事件，当子元素被点击时，由于事件冒泡的特性，会触发父元素上的事件。我们只需要在事件中通过 event 对象中的 target 属性来找到被点击的子元素即可。

冒泡机制是指当一个元素触发事件时，事件会从该元素开始，沿着 DOM 树向上冒泡，依次触发其父元素、祖先元素等的同类型事件监听器。1 这个过程就像水中的气泡从底部往上冒一样，事件也会往上传递。

例如，假设有如下 html，我们想要在每个 li 上绑定 onClick 事件，最直观的做法当然就是给每个 li 分别添加事件，增加事件回调。但是我们有一种更好的做法，那就是在 ul 上添加有个监听事件，由于事件的冒泡机制，事件就会冒泡到ul上，因为ul上有事件监听，所以事件就会触发。 Event 对象提供了一个属性叫 target，可以返回事件的目标节点，我们成为事件源，也就是说，target 就可以表示为触发当前的事件 dom，我们可以根据 dom 进行判断到底是哪个元素触发了事件，根据不同的元素，执行不同的回调方法。

代码实现

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

var list = document.querySelector('#myList');
list.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    alert('You clicked on item: ' + event.target.textContent);
  }
});

在这个例子中，我们为 ul 元素添加了一个点击事件监听器。当用户点击列表中的任何一个 li 元素时，事件会冒泡到 ul 元素上，触发其点击事件监听器。在监听器函数中，我们检查了 event.target 属性，以确定实际触发事件的元素是否为 li 元素。如果是，则弹出一个警告框，显示被点击的项目的文本内容。

事件委托减少事件注册，节省内存。它可以大量节省内存占用，减少事件注册。此外，它还可以实现当新增子对象时无需再次对其绑定（动态绑定事件）。