事件委派

1、定义：把原本需要绑定在子元素的响应事件（click、keydown……）委托给父元素，让父元素担任监听的职务。

2、原理：DOM 元素的事件冒泡。

3、事件冒泡

前面提到事件委托的原理是 DOM 元素的事件冒泡，那么事件冒泡是什么呢？

一个事件触发后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段

4、优点：①可以大量节省内存占用，减少事件注册，比如：在 ul 上代理所有的 li 的 click 事件就非常棒。②可以实现当新增子对象时无需再次对其绑定（动态绑定事件）

5、实现事件委托三部曲：

• 把事件注册给上级。
• 利用事件对象. target 找到最先触发事件的元素。
• 用 nodeName 判断这个元素是否我们所需要的。

6、案例：点 li，给 li 添加背景颜色

（事件委托的好处在于只访问了一次 DOM，减少了页面交互就绪时间）

使用事件委托注意事项

使用 “事件委托” 时，并不是说把事件委托给的元素越靠近顶层就越好。事件冒泡的过程也需要耗时，越靠近顶层，事件的”事件传播链”越长，也就越耗时。如果 DOM 嵌套结构很深，事件冒泡通过大量祖先元素会导致性能损失。

说明：本文部分内容借鉴博主：@Demi（JavaScript 事件代理（事件委托）篇），出于学习目的借鉴，如有侵权，请联系删除。