JavaScript 中事件冒泡和捕获的区别

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 中事件冒泡和捕获的区别

作者：迹忆客最近更新：2023/06/05 浏览次数：

本文将讨论在 JavaScript 中使用的事件冒泡和事件捕获。阅读本文后，您将清楚地了解 JavaScript 中的事件冒泡和捕获。

我们还将讨论这些事件之间的差异。我们将看到何时在 JavaScript 中使用事件冒泡和捕获。

在 JavaScript 中，事件冒泡和捕获描述了浏览器如何处理针对嵌套元素的事件的阶段。

让我们一一了解这两个事件。

JavaScript 中的事件冒泡

事件冒泡是JavaScript中使用的一种事件传播方法。事件冒泡是从触发事件的元素开始，依次向上冒泡包含的元素的过程。

使用 JavaScript 中的事件冒泡，事件首先被最内层元素捕获和处理，然后传播到最外层元素。

事件冒泡的原理很简单。当另一个元素发生事件时，它首先在处理程序上运行，然后在其父元素上运行。

它与事件在 JavaScript 中的嵌套元素中传播的顺序有关。

让我们借助下图来理解事件冒泡。

事件冒泡流程

上图显示当用户点击按钮时，事件按照从下到上的顺序流动。

现在让我们借助示例代码来了解事件冒泡。

如我们所见，我们有一个 HTML 代码，其中我们创建了两个按钮，父按钮和子按钮。我们将父按钮存储在 <div> 中，将子按钮存储在 <p> 中。

在下面的代码中，我们使用了 JavaScript，在脚本中，我们使用了一个 .addEventListener 对象来执行冒泡事件。

运行此代码时，我们将显示两个事件：父事件和子事件。子事件是最里面的元素，父事件是最外面的元素。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>
        The Bubbling_Event in Javascript
    </title>
</head>
<body>
    <h2>The Bubbling_Event in Javascript</h2>
    <div id="parent">
    <button>
        <h2>Parent</h2>
    </button>
    <button id="child">
<p>Child</p>
    </button>
    </div><br>
    <script>
        document.getElementById(
"child").addEventListener("click", function () {
            alert("YOU CLICKED THE CHILD ELEMENT.");
        }, false);
        document.getElementById(
"parent").addEventListener("click", function () {
            alert("YOU CLICKED THE PARENT ELEMENT.");
        }, false);
    </script>
</body>
</html>

运行代码后的输出：

事件冒泡输出

当我们点击父按钮时，我们得到以下输出：

单击父按钮时的输出

当我们点击子按钮时，我们得到以下输出：

单击子按钮时的输出

单击子事件后的父事件

从上面的示例代码我们可以看出，在事件冒泡中，最内层元素的事件先被触发，最外层事件的元素才被触发。

元素首先被处理，然后是

。

所以，当我们需要处理 JavaScript 中的最内层元素时，我们会使用冒泡事件。

JavaScript 中的事件捕获

事件捕获在实际代码中很少使用，但有时非常有用。事件捕获与事件冒泡相反；最外层的元素在事件捕获中首先被定位。

在 JavaScript 中，当我们需要首先处理最外层元素的事件时，我们使用事件捕获。事件捕获在事件冒泡之前进行，但很少使用，因为事件冒泡足以处理 JavaScript 中的事件流。

下面给出理解事件捕获的流程图。该图显示，当用户单击按钮时，事件会按此顺序从上到下流动。

事件捕获流程图

现在，让我们借助示例代码来了解事件捕获。

正如我们在下面的代码中看到的，我们在 <div> 元素中创建了一个按钮。我们还在以下 HTML 代码中使用了 JavaScript，其中我们使用了 .addEventListener 对象，它执行事件捕获。

当我们运行此代码并单击 Click Me 按钮时，控制台将生成以下输出。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>What is Event Capturing in JavaScript</title>
</head>
<body>
    <div class="button-list">
        <div class="button-container">
            <button class="button"
                onClick="console.log('Button!')">
                Click Me
            </button>
        </div>
    </div>
    <script>
        document.addEventListener("click", () =>
            console.log('Event Capturing!'), true);
        document.addEventListener("click", () =>
            console.log('Event Bubbling!'), false);
    </script>
</body>
</html>