假如在一个 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>
情况有两点不同：
- 虽然点击的元素时
li.child li，但实际的目标元素为li.child - 需要判断点击的元素是否在
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 库在处理事件和元素时，有着更强大的功能，在实际应用中也很有帮助。
参考链接
-
较新的浏览器才支持
Element.matches()，可能会有兼容性的问题。 ↩
