DOM事件流

5,945 阅读1分钟

DOM事件流理论

事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程DOM事件流
比如我们给一个div注册了点击事件:

QQ图片20221231183551.png
DOM事件流分为三个阶段:
1.捕获阶段
2.当前目标阶段
3.冒泡阶段
那么如何来理解捕获阶段和冒泡阶段呢,我们举个例子:当我们向水里扔一块石头,首先它会有一个下降的过程,这个过程就可以理解为从最顶层向事件发生的最具体元素(目标点)的捕获过程;之后会产生泡泡,会在最低点(最具体元素)之后漂浮到水面上,这个过程相当于事件冒泡。

Screenshot_2022_1231_183817.png

注意

1.JS代码中只能执行捕获或者冒泡其中的一个阶段。
2.onclick和attachEvent只能得到冒泡阶段。
3.addEventListener第三个参数如果是ture那么则处于捕获阶段,如果是false那么则处于冒泡阶段。
4.实际开发中我们很少使用事件捕获,我们更关注事件冒泡。
5.有些事件是没有冒泡的,比如onblur、onfocus、onmouseenter、onmouseleave。