JS事件冒泡和事件捕获_js事件冒泡和事件捕获是什么-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaolouuuu/article/details/145262734

在JavaScript中，事件冒泡（Event Bubbling）和事件捕获（Event Capturing）是两种不同的事件传播机制。当你在DOM元素上注册事件时，事件的触发并不会立即发生，而是会按照一定的顺序进行传播。事件的传播机制决定了事件如何从目标元素传递到DOM树中的其他元素。

事件捕获和事件冒泡的提出

事件冒泡 最早由微软在 Internet Explorer 中提出，作为一种事件传播机制。当用户与元素交互时，事件从目标元素开始，逐层向父元素传播，直到 document。
事件捕获 是后来由 W3C 引入的，它与冒泡机制相反，事件从最外层的祖先元素开始传播，逐层向目标元素传递，直到事件到达目标元素。

为什么整合了捕获和冒泡机制？

捕获和冒泡机制被整合到浏览器事件模型中，目的是为了提供更细粒度的控制，让开发者能够根据需求选择何时触发事件，并控制事件的传播路径。具体原因如下：

事件捕获 允许开发者在事件到达目标元素之前进行处理，适用于某些需要提前干预的场景。
事件冒泡 允许开发者在事件到达目标元素之后逐层向上传播，适用于处理从目标元素到更高层的所有相关逻辑。

事件传播的顺序

在现代浏览器中，事件会按以下顺序传播：

事件捕获阶段：事件从根元素（document）开始，向下传播到目标元素（如果事件监听器启用了捕获）。
事件目标阶段：事件到达目标元素并触发目标元素的事件处理程序。
事件冒泡阶段：事件从目标元素开始，向上传播至父元素，直到根元素。

具体例子实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            width: 300px;
            height: 300px;
            background-color: rgb(162, 14, 14);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .blue {
            width: 200px;
            height: 200px;
            background-color: rgb(68, 129, 234);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .green {
            width: 100px;
            height: 100px;
            background-color: rgb(41, 108, 41);
        }
    </style>
</head>

<body>
    <div class="red">
        <div class="blue">
            <div class="green"></div>
        </div>
    </div>
    <script>
        var red = document.querySelector('.red')
        var blue = document.querySelector('.blue')
        var green = document.querySelector('.green')

        // 1.事件冒泡从内部向外，事件捕获从外部向内
        // 2.如果开启了事件捕获，捕获和冒泡同时存在，先捕获后冒泡
        // 3.如果同时开启了多个事件捕获，先外后内
        red.addEventListener('click', function () {
            console.log('red')
        }, true)
        blue.addEventListener('click', function () {
            console.log('blue')
        }, true)
        // 4.阻止事件冒泡
        green.addEventListener('click', function (e) {
            // e.stopPropagation()
            console.log('green');
        })
    </script>

</body>

</html>

1.事件冒泡从内部向外，事件捕获从外部向内

2.如果开启了事件捕获，需要在 addEventListener 方法中传递第三个参数 true，捕获和冒泡同时存在，先捕获后冒泡

3.如果同时开启了多个事件捕获，先外后内

4.阻止事件冒泡：e.stopPropagation()