事件冒泡 - JavaScript 概念简化

大家好，欢迎阅读 JavaScript 概念简化系列文章的又一篇。​​今天，我们将探讨 JavaScript 中的事件冒泡。

我只是想介绍一下在进入主要活动之前你需要了解的一些基本事项。

背景知识

事件是系统中发生的一个动作或事件。最简单的例子就是用户点击按钮。

对于每个触发的事件，我们可以编写一个事件处理程序（一个用于处理该事件的 JavaScript 函数）来执行我们想要的操作。例如，我们可以编写一个事件处理函数，在用户点击按钮时在屏幕上打印一些内容。

JavaScript 中也有事件监听器。事件监听器会监听发生的事件。因此，如果我们想在用户点击按钮时在屏幕上打印一些内容，我们需要首先创建一个事件监听器来监听按钮的点击事件。

当我们在浏览器中加载 HTML 页面时，浏览器会为每个页面创建一个树状结构，称为DOM。例如，如果body标签内有一个按钮，则按钮元素的路径将是html -> body -> button。

事件处理的三个阶段

在处理事件时，现代浏览器分为三个阶段。

1. 捕获阶段
2. 目标阶段
3. 冒泡阶段

捕获阶段

浏览器检查元素的最外层祖先是否在捕获阶段注册了 onclick 事件处理程序，如果是则运行它。

来源 - MDN 文档

目标阶段

浏览器检查目标属性是否具有注册的点击事件的事件处理程序，如果是则运行它。

然后，如果bubbles为真，它会将事件传播到所选元素的直接父元素，然后是下一个，依此类推。否则，如果bubbles为假，它不会将事件传播到目标元素的任何祖先元素。

来源 - MDN 文档

冒泡阶段

浏览器检查所选元素的直接父元素是否在冒泡阶段注册了 onclick 事件处理程序，如果是则运行该处理程序。

来源 - MDN 文档

等等，什么？

光看上面的文字很难理解这个问题。让我简化一下。我们面临的问题如下。

假设您创建了一个包含两个div块（块 A 和块 B）的 UI 。块 B 位于块 A 内。并且您为两个div标签的点击事件创建了事件处理程序。

现在，当您点击块 B时，浏览器在调用 B 的事件处理程序之前，会调用 A 的事件处理程序函数。显然，这不是我们期望的。当我们点击 B 时，应该只调用 B 的事件处理程序。

我们该如何解决这个问题？

幸运的是，我们确实有一个解决方案。在事件对象中，我们有一个名为stopPropogation的函数。你可以在 B 的事件处理函数开始时调用此函数。你将看到，这次只有 B 的事件处理函数被执行。

事件冒泡何时有用？

在某些情况下，这可能会很有用。例如，当你有一个项目列表，并且你想对所有项目执行某些操作时，通常需要为所有项目添加事件监听器。

但是由于您现在知道了事件冒泡的概念，您只需编写并分配父节点的事件处理程序并观察奇迹的发生。

这个概念叫做事件委托。你可以在这篇文章中阅读更多相关内容。

感谢阅读这篇文章。希望你今天学到了一些有价值的东西。最重要的是，大家注意安全😷