24 事件处理之事件冒泡和捕获

在我们的上篇教程中，我们讨论了如何使用 addEventListener 方法来添加事件监听器。今天，我们将深入探讨 JavaScript 中的事件传播机制，即 事件冒泡 和 事件捕获。了解这些概念将帮助你更好地处理事件，提升用户交互的体验。

事件传播机制

JavaScript 中的事件传播分为两个阶段：事件捕获和事件冒泡。

1. 事件捕获

在事件捕获阶段，事件从 document 对象传播到触发事件的目标元素。在这个阶段，最外层的元素会首先接收到事件，而最终的目标元素则在事件到达最后时接收事件。

2. 事件冒泡

事件冒泡是指事件从目标元素开始，然后沿着其父节点依次向上冒泡，直到到达 document 对象。这是 JavaScript 中最常见的事件处理方式。

事件捕获与事件冒泡的示例

现在让我们通过一个简单的示例来演示事件捕获和事件冒泡的行为。

HTML 结构

<div id="parent" style="padding: 20px; border: 1px solid black;">
    <button id="child">点击我!</button>
</div>

JavaScript 代码

// 获取父元素和子元素
const parent = document.getElementById('parent');
const child = document.getElementById('child');

// 添加事件监听器 - 冒泡阶段
parent.addEventListener('click', () => {
    console.log('父元素被点击了！');
});

// 添加事件监听器 - 冒泡阶段
child.addEventListener('click', () => {
    console.log('子元素被点击了！');
});

// 添加事件监听器 - 捕获阶段
parent.addEventListener('click', () => {
    console.log('捕获阶段 - 父元素被点击了！');
}, true);

代码说明

在这个例子中，我们设置了一个父元素和一个子元素，并为它们都添加了点击事件监听器。

• parent 元素的监听器在冒泡阶段触发， 它将输出 父元素被点击了！。
• child 元素的监听器也在冒泡阶段触发， 它将输出 子元素被点击了！。
• 对于 parent 元素，我们同时在捕获阶段添加了事件监听器（通过将第三个参数设置为 true），这将优先于冒泡阶段被触发，输出 捕获阶段 - 父元素被点击了！。

事件的传播顺序

如果我们点击按钮（子元素），控制台将会显示以下输出：

捕获阶段 - 父元素被点击了！
子元素被点击了！
父元素被点击了！

这是因为事件首先在捕获阶段到达父元素，接着到达子元素，随后在冒泡阶段又回到父元素。

使用 stopPropagation 方法

在某些情况下，我们可能希望阻止事件继续冒泡。可以使用 event.stopPropagation() 方法来实现。

更新的代码示例

child.addEventListener('click', (event) => {
    console.log('子元素被点击了！');
    event.stopPropagation(); // 阻止事件冒泡
});

更新时间后的输出

当我们点击按钮时，控制台将只输出：

子元素被点击了！

由于 event.stopPropagation() 被调用，事件不会继续冒泡到父元素。

小结

今天我们讨论了 JavaScript 中的 事件冒泡 和 事件捕获。掌握这些知识，可以帮助你处理复杂的事件交互。同时，我们还学习了如何通过 stopPropagation 方法来控制事件的传播。

在下一篇中，我们将转向 AJAX 与异步编程，深入探讨 AJAX 的基本概念以及如何在网页中实现异步数据交互。敬请期待！