JS之Dom事件流

178 阅读1分钟

dom事件流定义:事件流描述的是从页面接收事件的顺序,事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程就是dom事件流

dom事件流分为三个阶段

1.捕获阶段
2.当前目标阶段
3.冒泡阶段

事件冒泡:IE最早提出,事件开始时由最具体的元素接收,然后逐级向上传播dom最顶层节点的过程
事件捕获:网景最早提出,由DOM最顶层节点开始,然后逐级向下传播到最具体的元素接收的过程

比如我们给一个div设置了鼠标点击事件那么下面就是它的事件流过程的图例

image.png

1.下面我们用代码来验证一下事件冒泡和事件捕获吧

image.png

下面由一个父盒子包含一个子盒子来演示

事件捕获案例
如果这个addEventListener 第三个参数如果是true,那么则处于捕获阶段 documen->html->body->father->son

image.png

image.png

事件冒泡阶段案例
如果这个addEventListener 第三个参数如果是false(如果不写的话默认是false),那么则处于冒泡阶段 son->father->body->html->documen

image.png

image.png

2.那么如何阻止事件的冒泡呢?

image.png 用stopPropagation即可阻止事件的冒泡