JavaScript - 事件冒泡：初学者指南

你好呀，未来的JavaScript魔法师们！? 今天，我们将踏上一段激动人心的旅程，探索事件冒泡的世界。如果你之前从未听说过它——别担心，到了本教程结束时，你将充满知识！（看到我在这里做了什么吗？?）

JavaScript - Event Bubbling

什么是事件冒泡？

想象你在一个家庭聚会上，给表哥讲了一个笑话。表哥笑了，然后你的姑姑听到了，也笑了，接着你的祖父母也明白了，开始格格地笑。JavaScript中的事件冒泡有点就像这样！

从技术上来说，事件冒泡是HTML DOM（文档对象模型）树中事件传播的一种方式。当一个元素上发生事件时，它首先在该元素上运行处理程序，然后在其父元素上运行，一直向上传播到其他祖先元素。

让我们用一个简单的例子来分解这个过程：

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

document.getElementById('child').addEventListener('click', function() {
console.log('子元素被点击！');
});

document.getElementById('parent').addEventListener('click', function() {
console.log('父元素被点击！');
});

document.getElementById('grandparent').addEventListener('click', function() {
console.log('祖父元素被点击！');
});

如果你点击按钮，你将在控制台中看到以下内容：

子元素被点击！
父元素被点击！
祖父元素被点击！

这就是事件冒泡的作用！事件从按钮（子元素）开始，然后冒泡到父元素，最后到祖父元素。

事件冒泡的步骤

现在我们理解了基本概念，让我们分解事件冒泡的步骤：

事件在最深层的元素（目标元素）上发生。
目标元素上的事件处理程序运行。
事件冒泡到父元素，并运行其事件处理程序。
这会一直持续，直到达到document对象。

这就像一个“传包裹”的游戏，每个元素在事件沿DOM树向上传播时都有机会处理事件。

使用两个嵌套的DIV进行事件冒泡

让我们看一个使用两个嵌套div的更实际例子：

<div id="outer" style="background-color: blue; padding: 20px;">
<div id="inner" style="background-color: red; padding: 20px;">
点击我！
</div>
</div>

document.getElementById('outer').addEventListener('click', function() {
console.log('外部div被点击');
});

document.getElementById('inner').addEventListener('click', function() {
console.log('内部div被点击');
});

当你点击内部红色div时，你将看到：

内部div被点击
外部div被点击

事件从内部div开始，然后冒泡到外部div。就像向池塘里扔一块小石头——涟漪从中心开始向外扩散！

使用三个嵌套级别进行事件冒泡

现在，让我们给我们的例子增加一个层级：

<div id="grandparent" style="background-color: green; padding: 20px;">
<div id="parent" style="background-color: blue; padding: 20px;">
<div id="child" style="background-color: red; padding: 20px;">
点击我！
</div>
</div>
</div>

document.getElementById('grandparent').addEventListener('click', function() {
console.log('祖父div被点击');
});

document.getElementById('parent').addEventListener('click', function() {
console.log('父div被点击');
});

document.getElementById('child').addEventListener('click', function() {
console.log('子div被点击');
});

现在，当你点击最内部的红色div时，你将看到：

子div被点击
父div被点击
祖父div被点击

这就像一个家庭等级——最小的先发言，然后是父母，最后是祖父母！

停止事件冒泡

有时，你可能想要停止这种冒泡行为。也许你不想让你的祖父母听到那个笑话！在JavaScript中，我们可以使用stopPropagation()方法来实现：

document.getElementById('child').addEventListener('click', function(event) {
console.log('子div被点击');
event.stopPropagation();
});

现在，当你点击子div时，你将只看到：

子div被点击

事件就停止在那里，就像在瓶子上塞了个塞子！

事件处理的有用方法

下面是JavaScript中事件处理的一些有用方法：

方法	描述
`addEventListener()`	将事件处理程序附加到元素
`removeEventListener()`	从元素中移除事件处理程序
`event.stopPropagation()`	阻止事件冒泡到DOM树
`event.preventDefault()`	阻止事件的默认行为
`event.target`	返回触发事件的元素
`event.currentTarget`	返回事件监听器被触发的元素

结论

就这样，朋友们！我们已经通过事件冒泡的概念在JavaScript中畅游了一番。记住，理解事件冒泡对于管理你Web应用程序中的复杂事件处理至关重要。这就像理解家庭聚会上的动态——知道谁听到了什么，什么时候听到，可以让你避免很多困惑！

通过这些例子进行练习，尝试不同的嵌套结构，很快你就能像专业人士一样处理事件了。快乐编码，愿你的事件总是顺利冒泡！?

Credits: Image by storyset