JS中DOM事件流总结

原创

前端小tips

修改于 2021-11-24 10:55:23

3.9K0

修改于 2021-11-24 10:55:23

文章被收录于专栏：前端文章小tips前端文章小tips

一、事件捕获

1.概念

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

2.图解

事件捕获

二、事件冒泡

1.概念

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

2.图解

事件冒泡

三、DOM事件流

1.概念

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

2.图解

DOM事件流

3.示例

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

<!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.用法

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

2.示例

<!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.结果

执行结果