MST

星途 面试题库

面试题：JavaScript 中事件冒泡与捕获的区别

请详细阐述 JavaScript 事件冒泡和事件捕获的执行顺序、触发机制以及它们在实际应用场景中的不同。同时，举例说明如何利用 `addEventListener` 方法分别绑定事件冒泡和事件捕获的处理函数。
21.3万 热度难度
编程语言JavaScript

知识考点

AI 面试

面试题答案

一键面试

执行顺序

  1. 事件捕获：从最外层的祖先元素开始，依次向内层元素传播，直到目标元素。
  2. 事件冒泡：从目标元素开始，依次向外层元素传播，直到最外层的祖先元素。

触发机制

  1. 事件捕获：当一个事件发生时，首先进入捕获阶段，浏览器会检查目标元素的祖先元素是否注册了捕获阶段的事件处理函数，如果有则依次执行。
  2. 事件冒泡：在捕获阶段结束后，如果目标元素本身注册了事件处理函数则执行，然后开始冒泡阶段，依次检查目标元素的父元素是否注册了冒泡阶段的事件处理函数，如果有则执行。

实际应用场景不同

  1. 事件捕获：
    • 适用于需要在事件到达目标元素之前进行处理的场景，比如全局的事件监控。例如，在一个大型网页应用中，可能希望在任何点击事件到达具体的按钮等目标元素之前，先记录下点击发生在哪个区域（祖先元素），用于统计等目的。
  2. 事件冒泡：
    • 常用于将多个子元素的相似事件处理逻辑集中到父元素上。比如在一个列表中，每个列表项都有点击事件，通过事件冒泡，可以在列表的父元素上统一处理点击事件，而不需要为每个列表项都绑定单独的处理函数，这样可以提高性能并简化代码。

利用 addEventListener 方法绑定事件冒泡和事件捕获处理函数示例

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

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div id="outer">
        Outer Div
        <div id="inner">Inner Div</div>
    </div>
    <script>
        const outerDiv = document.getElementById('outer');
        const innerDiv = document.getElementById('inner');

        // 绑定事件捕获处理函数
        outerDiv.addEventListener('click', function () {
            console.log('事件捕获：Outer Div 被点击（捕获阶段）');
        }, true);

        innerDiv.addEventListener('click', function () {
            console.log('事件捕获：Inner Div 被点击（捕获阶段）');
        }, true);

        // 绑定事件冒泡处理函数
        outerDiv.addEventListener('click', function () {
            console.log('事件冒泡：Outer Div 被点击（冒泡阶段）');
        }, false);

        innerDiv.addEventListener('click', function () {
            console.log('事件冒泡：Inner Div 被点击（冒泡阶段）');
        }, false);
    </script>
</body>

</html>

在上述代码中，addEventListener 的第三个参数为 true 时表示在捕获阶段触发，为 false 或省略时表示在冒泡阶段触发。