事件流和事件委托

事件流和事件委托

事件流

事件流包含3个阶段：

• 事件捕获阶段

• 目标阶段

• 事件冒泡阶段

页面上的一个事件发生时，首先浏览器的window对象会捕获到该事件，然后依次向下，document、documenElement、body也依次捕获到该事件，直到捕获到事件真正作用的元素上（也就是目标元素），这个过程属于事件捕获过程；然后从目标元素开始依次将事件向上冒泡，直到冒泡到window对象，这个过程属于事件冒泡过程；至此，整个事件流就完成了。

其中，从捕获到事件真正作用的元素开始到从该元素开始冒泡的这个阶段，属于目标阶段；

在目标阶段，目标元素上的事件是不遵循先捕获后冒泡的原则，而是哪个先绑定，哪个就先执行；

除目标元素外，其余元素均遵循事件先捕获后冒泡；

类似于onclick绑定的事件通常是在事件冒泡阶段执行

通过addEventListener绑定的事件需要根据其第三个参数true或者false来决定事件执行是在捕获还是冒泡阶段，true表示在捕获阶段，false表示在冒泡阶段，第三个参数默认是false

可以通过调用stopPropagation()方法来阻止事件的捕获或冒泡

preventDefault()可以阻止事件默认行为的发生，不影响事件流过程

事件委托

事件委托就是利用了事件冒泡原理，通过将事件处理添加到父级上，来控制所有子级的同类事件

事件委托的好处：

1、不用为每个子类元素都手动添加同类事件，减少DOM元素访问，提高性能

2、新添加的子级元素可以继承同类事件

参考文献：

[1] 事件冒泡、事件捕获和事件委托
[2] js中的事件委托