JS中DOM事件流总结

2021-11-24 10:55:23 浏览数 (1)

一、事件捕获

1.概念

事件捕获：从document到触发事件的那个节点，自上而下的去触发事件。

2.图解

事件捕获

二、事件冒泡

1.概念

事件冒泡：从触发事件的那个节点一直到document，是自下而上的去触发事件。

2.图解

事件冒泡

三、DOM事件流

1.概念

DOM事件流相当于将事件捕获与事件冒泡两者结合起来，事件触发的顺序是先进行事件捕获阶段 => 目标元素阶段 => 事件冒泡阶段。

2.图解

DOM事件流

3.示例

绑定事件方法（addEventListener）的第三个参数是控制事件触发顺序的，默认为false，即事件冒泡；若为true,即事件捕获。

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件</title>
    <style>
        .boxA {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
​
        .boxB {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
​
        .boxC {
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
​
<body>
​
    <div class="boxA" id="boxA">
        <div class="boxB" id="boxB">
            <div class="boxC" id="boxC">目标</div>
        </div>
    </div>
​
    <script>
        let boxA = document.getElementById("boxA");
        let boxB = document.getElementById("boxB");
        let boxC = document.getElementById("boxC");
​
        //目标元素
        boxC.addEventListener('click', function () { console.log("target1"); }, true);
        boxC.addEventListener('click', function () { console.log("target2"); }, true);
​
        // 事件冒泡
        boxB.addEventListener('click', function () { console.log("bubble1"); }, false);
        boxB.addEventListener('click', function () { console.log("bubble2"); }, false);
​
        // 事件捕获
        boxA.addEventListener('click', function () { console.log("capture1"); }, true);
        boxA.addEventListener('click', function () { console.log("capture2"); }, true);
​
    </script>
​
</body>
​
</html>

4.结果

执行结果

五、事件捕获或事件冒泡的阻止

1.用法

代码语言：javascript复制
#当在事件流执行过程中，需要阻止后续的事件的执行，可以使用以下语法
event.stopPropagation();

2.示例

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件</title>
    <style>
        .boxA {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
​
        .boxB {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
​
        .boxC {
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
​
<body>
​
    <div class="boxA" id="boxA">
        <div class="boxB" id="boxB">
            <div class="boxC" id="boxC">目标</div>
        </div>
    </div>
​
    <script>
        let boxA = document.getElementById("boxA");
        let boxB = document.getElementById("boxB");
        let boxC = document.getElementById("boxC");
​
        //目标元素
        boxC.addEventListener('click', function (e) { console.log("target1"); e.stopPropagation(); }, true);
        boxC.addEventListener('click', function () { console.log("target2"); }, true);
​
        // 事件冒泡
        boxB.addEventListener('click', function () { console.log("bubble1"); }, false);
        boxB.addEventListener('click', function () { console.log("bubble2"); }, false);
​
        // 事件捕获
        boxA.addEventListener('click', function () { console.log("capture1"); }, true);
        boxA.addEventListener('click', function (e) { console.log("capture2"); }, true);
​
    </script>
​
</body>
​
</html>

3.结果

执行结果

五、总结

* 事件函数执行顺序：捕获阶段的处理函数最先执行，其次是目标阶段的处理函数，最后是冒泡阶段的处理函数。目标阶段的处理函数，先注册的先执行，后注册的后执行。

  • 事件阻止只能阻止后续的阶段事件并且未作用于同一元素上的事件函数。

六、备注

本文参照：https://segmentfault.com/a/1190000015603334

addeventlistener document dom 事件

0 人点赞