事件委托是如何工作的

假如在一个 ul 中有着 100 个 li，当鼠标点击一个 li 的时候，便执行一些动作。完成以上功能必须给每个 li 都绑定一个事件吗？显然这么做有点浪费，毕竟要绑定 100 次，倘若能只绑定一次，就好了——说得便是事件委托。

事件委托（Event Delegation）是 JavaScript 中十分常用的方法之一。事件委托允许你不监听那些具体（li）的元素，相应的把事件绑定在其父元素（ul)上。例如下面这段代码：

<ul id="parent-list">
    <li class="child">Item 1</li>
    <li class="child">Item 2</li>
    <li class="child">Item 3</li>
    <li class="child">Item 4</li>
    <li class="child">Item 5</li>
    <li class="child">Item 6</li>
</ul>

如之前所说，分别给每个 li 的绑定事件，不仅看上去有些浪费，而且一旦再添加新的 li 的时候，还要再给新加入的元素绑定事件，没法实现动态监听。但是父元素 ul 是不变的，给它绑定监听事件再合适不过。

关键问题是：怎么找到那个目标元素？请看下面代码：

//找到父元素，给其绑定事件
document.getElementById("parent-list").addEventListener("click", function(e) {
  //找到真正的目标元素
  if(e.target && e.target.nodeName === "LI") {
      console.log(e.target.innerText);
  }
});

监听 ul，一旦子元素事件冒泡到父元素，通过 event.target 检查是否找到了目标元素。如果没找到，就忽略这次事件；找到了，则输出目标元素内容。可以点击示例查看结果：

<a class="jsbin-embed" href="http://jsbin.com/vexeter/embed?console,output">JS Bin on jsbin.com</a><script src="http://static.jsbin.com/js/embed.min.js?3.41.10"></script>

这只是简单的使用原生 JS 实现事件委托，其中还有许多不足——如果 li 内还有子元素怎么办？

<ul id="parent-list">
    <li class="child">
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
      </ul>
    </li>
    <li class="child">Item 2</li>
    <li class="child">Item 3</li>
    <li class="child">Item 4</li>
    <li class="child">Item 5</li>
    <li class="child">Item 6</li>
  </ul>

情况有两点不同：

1. 虽然点击的元素时 li.child li，但实际的目标元素为 li.child
2. 需要判断点击的元素是否在 li.child 之内

对于第一点，使用 Element.matches() 或许会是个好主意^[1]。第二点的解决办法是：循环检查点击元素的父元素，止于监听元素。如下示例：

<a class="jsbin-embed" href="http://jsbin.com/sedewet/embed?console,output">JS Bin on jsbin.com</a><script src="http://static.jsbin.com/js/embed.min.js?3.41.10"></script>

当然，还有许多 DOM 库在处理事件和元素时，有着更强大的功能，在实际应用中也很有帮助。

参考链接

• How JavaScript Event Delegation Works

---

1. 较新的浏览器才支持 Element.matches()，可能会有兼容性的问题。 ↩