JS 事件流事件冒泡和捕获

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

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

由此可以知道
　　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>

结果如下：
在这里插入图片描述

JS 事件流 事件冒泡 和 捕获

猜你喜欢

JS 事件流事件冒泡和捕获