JavaScript事件流如何从捕获到冒泡再到目标元素，这一系列过程如何实现？

本文共计1621个文字，预计阅读时间需要7分钟。

事件+HTML中与JavaScript交互是通过事件驱动的来实现的，例如鼠标点击事件、页面滚动事件onscroll等，可以向文档或文档中的元素添加事件监听器来预定事件。想知道这些事件是在中发生的。

事件

HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。

事件流

事件流描述的就是从页面中接收事件的顺序。而早期的IE和Netscape提出了完全相反的事件流概念，IE事件流是事件冒泡，而Netscape的事件流就是事件捕获。

事件流类别

事件冒泡

即从下至上，从目标触发的元素逐级向上传播，直到window对象。

事件捕获

即从上至下，从document逐级向下传播到目标元素。

后来ECMAScript在DOM2中对事件流进行了进一步规范，基本上就是上述二者的结合。

DOM2级事件规定的事件流包括三个阶段：

1. 事件捕获阶段
2. 处于目标阶段
3. 事件冒泡阶段
   

注意⚠️：先捕获后冒泡，但是在目标节点上谁写在前面谁先执行。但是在目标元素上不区分冒泡还是捕获，按绑定的顺序来执行。