来吧，“像五岁一样学习”只是一个短语——我不是在这里讲一个玩具故事！但我保证，如果你从头到尾仔细阅读，一切都会有意义。

事件冒泡和捕获是在 JavaScript 中触发事件时事件如何通过 DOM（文档对象模型）传播（或传播）的两个阶段。现在，这个说法需要澄清事件传播的概念。

事件传播

当某个元素（例如 div 内的按钮）上发生事件时，该事件不仅仅发生在该按钮上。事件在 DOM 中传播的过程称为事件传播。这个过程分为两个主要阶段：

• 事件捕获（也称为“trickling”）

• 事件冒泡

现在，我希望你明白了。让我们通过示例来理解两者。

事件冒泡

事件冒泡是指当某个元素上发生事件时，它首先触发该元素的事件处理程序。然后，它在 DOM 树中向上移动，触发其父元素的事件处理程序，依此类推，直到到达文档或 DOM 树的根。

  Parent Div
  Click Me!

示例说明： 单击按钮时，显示“Button Clicked!”警报首先显示，因为该事件是在按钮上触发的。之后，事件“冒泡”到父 div，您会看到“Parent Div Clicked!”警报。这是因为事件从按钮开始，然后上升到其父级 div。所以，这个传播过程被称为“事件冒泡”。

事件捕捉

事件捕获是冒泡的逆过程。该事件从网页顶部（从文档开始）开始，向下移动到您与之交互的元素。这意味着父元素的事件处理程序将首先被触发，并且事件将向下移动到您单击或与之交互的子元素。

  Parent Div
  Click Me!

在这种情况下，当您单击按钮时，“Parent Div Clicked!”警报将首先显示。然后，“按钮被点击！”之所以会显示警报，是因为事件从文档级别开始，首先捕获（滴流）到父 div，然后到达按钮。

addEventListener的第三个参数的值为true是捕获阶段的决定因素。

每个事件都会经历 3 个阶段

当然，每个事件都会经历所有三个阶段：

• 捕获阶段：事件从顶部（文档）开始，向下到达目标。

• 目标阶段：事件到达您与之交互的元素（目标）。

• 冒泡阶段：到达目标后，事件通过父元素向上冒泡。

所以，是的，事件自然会经历所有三个阶段，但是 JavaScript 可以让您控制事件侦听器将执行的阶段。

即使事件经历所有三个阶段，JavaScript 的事件监听器默认情况下附加到冒泡阶段。这意味着当您添加事件监听器而不指定任何内容时，它将仅在冒泡阶段监听事件（在事件到达目标并开始向上移动之后）。

监听事件（当它沿着 DOM 传播时）。事件仍然会经历所有阶段（捕获、目标和冒泡），但监听器将在事件到达目标元素之前的捕获阶段被触发。

总是通过捕获和冒泡移动。当你传递 true 时，你并没有阻止冒泡阶段。您只是告诉听众在捕获期间做出响应。事件将从捕获到目标继续，然后像往常一样冒泡。

：

• 所有事件都会自然地经历捕获、目标和冒泡阶段

  。

• 默认情况下，事件监听器在冒泡阶段工作

  （事件到达目标并向上移动之后）。

当您传递 true 时，您将告诉事件侦听器在捕获阶段
• （当事件向下传播时）触发

  。

事件仍然会经历所有阶段（捕获、目标和冒泡），但您的侦听器决定在哪个阶段执行操作。