深入理解 JavaScript 事件与事件传播机制

vvilkin的学习备忘

于 2025-03-06 09:28:24 发布

阅读量861

点赞数 21

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/vvilkim/article/details/145922668

JavaScript 专栏收录该内容

40 篇文章

订阅专栏

在前端开发中，事件是 JavaScript 与用户交互的核心机制之一。无论是点击按钮、输入文本，还是页面加载完成，这些操作都会触发相应的事件。理解事件及其传播机制，对于编写高效、可维护的代码至关重要。本文将深入探讨事件的概念、事件传播的机制，以及如何利用这些知识优化代码。

什么是事件？

事件是指在浏览器中发生的特定交互或动作。常见的事件类型包括：

鼠标事件：如 click（点击）、mouseover（鼠标悬停）、mouseout（鼠标移出）等。
键盘事件：如 keydown（按键按下）、keyup（按键松开）等。
表单事件：如 submit（表单提交）、change（输入框内容改变）等。
窗口事件：如 load（页面加载完成）、resize（窗口大小改变）等。

通过监听这些事件，开发者可以在用户与页面交互时执行相应的操作。例如：

document.getElementById('myButton').addEventListener('click', function() {
    alert('按钮被点击了！');
});

事件传播机制

当一个事件被触发时，它会在 DOM（文档对象模型）中传播。事件传播分为三个阶段：

1. 捕获阶段（Capture Phase）

事件从文档根节点（document）开始，逐级向下传播，直到到达触发事件的目标元素。捕获阶段通常用于提前处理事件。

2. 目标阶段（Target Phase）

事件到达触发事件的目标元素，并在目标元素上触发。

3. 冒泡阶段（Bubble Phase）

事件从目标元素开始，逐级向上传播，直到到达文档根节点。冒泡阶段是默认的事件传播方式，常用于事件委托。

示例代码

以下代码展示了事件传播的三个阶段：

<div id="outer">
    <div id="inner">
        <button id="btn">点击我</button>
    </div>
</div>

<script>
    // 捕获阶段
    document.getElementById('outer').addEventListener('click', function() {
        console.log('outer - 捕获阶段');
    }, true);

    document.getElementById('inner').addEventListener('click', function() {
        console.log('inner - 捕获阶段');
    }, true);

    // 目标阶段
    document.getElementById('btn').addEventListener('click', function() {
        console.log('btn - 目标阶段');
    });

    // 冒泡阶段
    document.getElementById('inner').addEventListener('click', function() {
        console.log('inner - 冒泡阶段');
    }, false);

    document.getElementById('outer').addEventListener('click', function() {
        console.log('outer - 冒泡阶段');
    }, false);
</script>

点击按钮后，控制台输出顺序为：

outer - 捕获阶段
inner - 捕获阶段
btn - 目标阶段
inner - 冒泡阶段
outer - 冒泡阶段

如何控制事件传播？

1. 使用 `addEventListener` 的第三个参数

addEventListener 的第三个参数用于指定事件是在捕获阶段还是冒泡阶段触发：

true：事件在捕获阶段触发。
false（默认）：事件在冒泡阶段触发。

element.addEventListener('click', function(event) {
    console.log('捕获阶段');
}, true);

element.addEventListener('click', function(event) {
    console.log('冒泡阶段');
}, false);

2. 阻止事件传播

event.stopPropagation()：阻止事件继续传播（捕获或冒泡）。
event.stopImmediatePropagation()：阻止事件传播，并阻止同一元素上的其他事件处理程序执行。

document.getElementById('btn').addEventListener('click', function(event) {
    event.stopPropagation(); // 阻止事件传播
    console.log('按钮点击事件被处理，但不会传播到父元素');
});

事件委托（Event Delegation）

事件委托是利用事件冒泡机制，将事件处理程序绑定到父元素上，通过事件冒泡处理子元素的事件。这种方式可以减少事件处理程序的数量，提高性能。

示例代码

<ul id="parent">
    <li>选项 1</li>
    <li>选项 2</li>
    <li>选项 3</li>
</ul>

<script>
    document.getElementById('parent').addEventListener('click', function(event) {
        if (event.target.matches('li')) {
            console.log('点击了:', event.target.textContent);
        }
    });
</script>

在这个例子中，我们只需要为父元素 <ul> 绑定一个事件处理程序，就可以处理所有 <li> 元素的点击事件。