事件委托

事件委托

1. 基本概念

事件委托，简单的来说，就是把一个元素的响应事件的函数委托到另一个元素。一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

前面提到 DOM 中事件委托的实现是利用事件冒泡的机制，那么事件冒泡是什么呢？

2. 事件传播

事件的传播分为三个阶段：「捕获阶段」、「目标阶段」、「冒泡阶段」。

1. 「捕获阶段」 —— 从window，document 和根元素开始，事件向下扩散至目标元素的祖先
2. 「目标阶段」 —— 事件在用户单击的元素上触发
3. 「冒泡阶段」——最后，事件冒泡通过目标元素的祖先，一直到根元素 document 和 window。

preview

由addEventListener(ev, fn, useCapture = false)第三个参数控制，当useCapture为true，表示该事件在捕获阶段触发，当useCapture为false，表示该事件在冒泡阶段触发。

3. 事件委托的好处

1. 减少内存消耗

试想一下，如果我们有一个列表，列表之中有大量的列表项，我们需要在点击列表项的时候响应一个事件。如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能。因此，比较好的方法就是把这个点击事件绑定到他的父层，然后在执行事件的时候再去匹配判断目标元素。所以事件委托可以减少大量的内存消耗，节约效率。

1. 动态绑定事件

比如上述的例子中列表项就几个，我们给每个列表项都绑定了事件。在很多时候，我们需要通过 AJAX 或者用户操作动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件。如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的。所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。