JavaScript之DOM事件流

 

 

什么是DOM事件流
事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

DOM事件流分为3个阶段：

1. 捕获阶段

2. 当前目标阶段

3. 冒泡阶段

比如我们给一个div注册了点击事件：

 

注意：

1. JS代码中只能执行捕获或者冒泡其中一个阶段

2. onclick 和 attachEvent 只能得到冒泡阶段

3. 如果 addEventListener 第三个参数是true处于捕获阶段，false或省略处于冒泡阶段

4. 实际开发中我们更关注事件冒泡

5. 有些事件是没有冒泡的，比如 onblur, onfocus, onmouseenter, onmouseleave

捕获阶段
如果 addEventListener 第三个参数是true，则处于捕获阶段。

捕获阶段：document -> html -> body -> father -> son

如果 addEventListener 第三个参数是false或省略，则处于冒泡阶段。

冒泡阶段：son -> father -> body -> html -> document

言而总之，总而言之，DOM事件流就是让事件触发的先后顺序，如果是在捕获阶段，那么就从最外层document依次执行到我们的事件触发对象。注册的事件就从大到小执行。
如果是冒泡阶段，那么就是从内而外执行事件，从小到大，就先从最内部的事件依次执行到最外层的事件。

版权声明：本文为CSDN博主「Moony_wy」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Moony_wy/article/details/122813290