快手 前端面试，JavaScript之DOM事件流(1)，2024必看

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

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

DOM事件流分为三个阶段：

• 捕获阶段

• 当前目标阶段

• 冒泡阶段

比如我们现在在页面中给div注册了一个点击事件，代码如下所示：

点击

可以发现这个div是存放在body里面的，而body又是存在于html标签内部的，html标签又是在整个页面的document文档中。

虽然我们是给div添加了点击事件，但是它的执行流程是：document先接收该点击事件，如果在该层没有添加点击事件，则去往下一层继续查找，直到找到目标，这一阶段称为捕获阶段。

当我们得到的这个点击事件的目标div时就是当前目标阶段。

点击事件完成后，又会反过来逐层向外执行，先到body层，如果没有执行程序，在继续向外执行，最后一直到document层，还没有执行程序得话，就退出，这个过程就是冒泡阶段。

可以用下图来描述：