JavaScript - 事件捕获：初学者指南

你好啊，未来的JavaScript魔法师们！今天，我们将踏上一段激动人心的旅程，探索事件捕获的世界。如果你之前从未编写过一行代码，也不用担心——我将作为你的友好向导，我们会一起一步一步地探索这个概念。所以，拿起你最喜欢的饮料，让我们开始吧！

JavaScript - Event Capturing

什么是事件捕获？

在深入细节之前，我们先来做一个简单的类比。想象你在家庭聚会上，你可爱的小表弟说了一句有趣的话。笑声从你的祖父母（最老的一代）开始，然后传到你的父母，最后到达你。JavaScript中的事件捕获与此类似！

在网页开发的世界里，事件捕获是事件传播过程中的一个阶段，事件首先被最外层的元素捕获，然后传递到内层元素。这就像一个“传递包裹”的游戏，但是用的是事件！

现在，让我们用更技术性的术语来解释一下：

当网页上发生事件（比如点击）时，它不仅仅发生在你点击的元素上。
事件从DOM（文档对象模型）树的顶部开始。
然后它穿过所有的父元素，直到达到目标元素。
这个向下的过程就是我们所说的“事件捕获”。

示例：基本事件捕获

让我们来看一个基本示例，以了解事件捕获是如何工作的。我们将创建一个简单的HTML结构，并添加一些JavaScript来演示捕获是如何进行的。

<div id="outer">
<div id="middle">
<div id="inner">点击我！</div>
</div>
</div>

<script>
const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');

outer.addEventListener('click', function() {
console.log('外层div被点击');
}, true);

middle.addEventListener('click', function() {
console.log('中层div被点击');
}, true);

inner.addEventListener('click', function() {
console.log('内层div被点击');
}, true);
</script>

在这个例子中，我们有三个嵌套的<div>元素。JavaScript代码为每个div添加了点击事件监听器。addEventListener中的true参数启用了事件捕获。

当你点击最内层的div时，你将在控制台看到以下输出：

外层div被点击
中层div被点击
内层div被点击

这显示了事件从最外层元素捕获到最内层元素的过程。就像事件在到达目标的过程中对每个父元素说“你好！”。

示例：阻止默认行为

有时，我们想要阻止事件的默认行为。例如，阻止表单提交或链接被跟随。让我们看看如何使用事件捕获来实现：

<div id="container">
<a href="https://www.example.com" id="link">点击我！</a>
</div>

<script>
const container = document.getElementById('container');
const link = document.getElementById('link');

container.addEventListener('click', function(event) {
console.log('容器被点击');
event.preventDefault();
}, true);

link.addEventListener('click', function(event) {
console.log('链接被点击');
}, true);
</script>

在这个例子中，我们有一个包含链接的容器div。容器的事件监听器使用event.preventDefault()来阻止链接的默认行为。

当你点击链接时，你将看到：

容器被点击
链接被点击

但是链接实际上不会带你去URL。就像容器在说，“不，我们就在这里！”

示例：捕获并停止传播

有时，我们可能想要阻止事件继续在DOM树中向下传播。我们可以使用event.stopPropagation()来实现。让我们看看如何操作：

<div id="grandparent">
<div id="parent">
<div id="child">点击我！</div>
</div>
</div>

<script>
const grandparent = document.getElementById('grandparent');
const parent = document.getElementById('parent');
const child = document.getElementById('child');

grandparent.addEventListener('click', function(event) {
console.log('祖父被点击');
}, true);

parent.addEventListener('click', function(event) {
console.log('父级被点击');
event.stopPropagation();
}, true);

child.addEventListener('click', function(event) {
console.log('子级被点击');
}, true);
</script>

在这个以家庭为主题的例子中，当你点击子级div时，你只会看到：

祖父被点击
父级被点击

事件在父级停止，永远不会到达子级。就像父级在说，“就到这里，年轻的イベント！”

总结

好了，各位！我们已经穿越了事件捕获的土地，从基本概念到阻止默认行为和停止传播。记住，事件捕获只是JavaScript中事件流的一部分。它就像开场白，在主要事件（双关语）之前。

以下是我们在本文中使用的方法的快速总结：

方法	描述
`addEventListener(event, function, useCapture)`	将事件处理器附加到元素。将`useCapture`设置为`true`以启用事件捕获。
`event.preventDefault()`	阻止事件的默认行为。
`event.stopPropagation()`	阻止事件在DOM树中向上冒泡，阻止父级处理器被通知事件。

练习这些概念，玩转代码，很快你就能像专业人士一样捕获事件了！记住，在编程中，就像在生活中一样，旅程和目的地同样重要。快乐编码，愿你的事件总是被妥善捕获！

Credits: Image by storyset