JS 事件流事件冒泡和捕获

末蓝、 2022-03-15 17:36 421阅读 0赞

JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器来预订事件，以便事件发生时执行相应的代码。  
　　  
　　事件流的起源：就是在浏览器发展到第四代的时候，浏览器开发团队遇到一个问题：页面的哪一部分会拥有某个特定的事件？要明白这个问题问的是什么，可以想象画在一张纸上的一组同心圆。如果你把手指放在圆心上，那么你的手指指向的不是一个圆，而是纸上的所有圆。也就是说如果单击了页面的某个按钮，同时也单击了按钮的容器元素，甚至单击了整个页面。不过呢，IE提出的是冒泡流，而网景提出的是捕获流。

这里盗用一下别人的图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70]

由此可以知道  
　　1、一个完整的JS事件流是从window开始，最后回到window的一个过程  
　　2、事件流被分为三个阶段`(1~5)`捕获过程、`(5~6)`目标过程、`(6~10)`冒泡过程

**注意：目标过程事件会触发两次，捕获和冒泡同样触发。**

addEventListener() 方法的第三个参数为一个 bool 值，就是用来控制捕获和冒泡的。

*  true : 捕获；
 *  false : 冒泡；

默认值为 false。

**JS原生的事件，比如 click 事件也是采用冒泡处理的。**

`Event.eventPhase`属性返回一个整数常量，表示事件目前所处的阶段。该属性只读。

var phase = event.eventPhase;  
Event.eventPhase的返回值有四种可能。

*  0，事件目前没有发生。
 *  1，事件目前处于**捕获阶段**，即处于从祖先节点向目标节点的传播过程中。
 *  2，事件**到达目标节点**，即Event.target属性指向的那个节点。
 *  3，事件处于**冒泡阶段**，即处于从目标节点向祖先节点的反向传播过程中。

下面是相关实例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JS Event Flow</title>
    </head>
    <body>
    <div>
        <h3>Test the flow of js event, such as click....</h3>
    </div>
    <script> window.addEventListener("click", function (e) { console.log("window捕获 阶段:" + e.eventPhase); }, true); document.addEventListener("click", function (e) { console.log("document捕获 阶段:" + e.eventPhase); }, true); document.body.addEventListener("click", function (e) { console.log("body捕获 阶段:" + e.eventPhase); }, true); document.querySelectorAll("div")[0].addEventListener("click", function (e) { console.log("div捕获 阶段:" + e.eventPhase); }, true); document.querySelectorAll("h3")[0].addEventListener("click", function (e) { console.log("h3捕获 阶段:" + e.eventPhase); }, true); window.addEventListener("click", function (e) { console.log("window冒泡 阶段:" + e.eventPhase); }); document.addEventListener("click", function (e) { console.log("document冒泡 阶段:" + e.eventPhase); }); document.body.addEventListener("click", function (e) { console.log("body冒泡 阶段:" + e.eventPhase); }); document.querySelectorAll("div")[0].addEventListener("click", function (e) { console.log("div冒泡 阶段:" + e.eventPhase); }); document.querySelectorAll("h3")[0].addEventListener("click", function (e) { console.log("h3冒泡 阶段:" + e.eventPhase); }); /*window.onclick = function (e) { console.log("window 阶段:" + e.eventPhase); }; document.onclick = function (e) { console.log("document 阶段:" + e.eventPhase); }; document.body.onclick = function (e) { console.log("body 阶段:" + e.eventPhase); }; document.querySelectorAll("div")[0].onclick = function (e) { console.log("div 阶段:" + e.eventPhase); }; document.querySelectorAll("h3")[0].onclick = function (e) { console.log("h3 阶段:" + e.eventPhase); };*/ </script>
    </body>
    </html>

结果如下：  
![在这里插入图片描述][20190308172744503.]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70]: /images/20220311/5e0936df07be4b7db4b6c412a02e4793.png
[20190308172744503.]: /images/20220311/946e58247e4440ea848181ed5ef24755.png