搞懂JS中的事件冒泡机制

前言 在 JavaScript 中，事件冒泡是一种事件传播机制，它允许您在文档结构中的元素中捕获和处理事件。当一个特定的事件在一个元素上触发时，该事件不仅会在该元素上执行，还会向其父元素传播，直到传播到文档中的顶部或某个元素停止传播该事件。相反的概念是事件捕获，它从最外层的元素开始，然后向内层元素传播。 一、事件传播机制简介 事件传播机制定义了事件如何被传递给DOM子元素或父元素。在 JavaScript 中，事件传播过程分为三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段。 1. 事件捕获阶段 事件捕获阶段是事件传播的第一个阶段，事件从文档根节点向下传播到目标元素的父级元素。在这个阶段，事件会经过所有的父级元素，直到达到目标元素。 2. 目标阶段 目标阶段是事件传播的第二个阶段，事件会在目标元素上触发，即在事件的目标元素上调用注册的事件处理程序。在目标阶段，事件将不再传播到其他任何元素，除非明确指定。 3. 事件冒泡阶段 事件冒泡阶段是事件传播的最后一个阶段，事件从目标元素的父级元素开始，向上传播到文档根节点。在这个阶段，事件会经过所有的父级元素，直到达到文档根节点。 二、事件冒泡示例 让我们看一个简单的示例，来演示事件冒泡机制。假设我们有以下 HTML 结构：

<div id="outer">
  <div id="inner">Click me!</div>
</div>

下面是 JavaScript 的事件处理程序：

function outerClick() {
  console.log("Clicked the outer element!");
}

function innerClick() {
  console.log("Clicked the inner element!");
}

var outer = document.getElementById("outer");
var inner = document.getElementById("inner");

outer.addEventListener("click", outerClick);
inner.addEventListener("click", innerClick);

1. 点击内部元素 当我们单击内部元素时，会发生以下事件传播过程： - 事件捕获阶段：事件不会触发此阶段，因为没有在目标元素之外的父级元素上注册捕获事件处理程序。 - 目标阶段：点击事件在内部元素上触发，将调用内部元素上注册的事件处理程序，输出 "Clicked the inner element!"。 - 事件冒泡阶段：点击事件开始向上传播，由于没有在外部元素上注册冒泡事件处理程序，冒泡过程停止。 2. 点击外部元素 当我们单击外部元素时，会发生以下事件传播过程： - 事件捕获阶段：点击事件在外部元素上触发，将调用外部元素上注册的事件处理程序，输出 "Clicked the outer element!"。 - 目标阶段：点击事件在内部元素上触发，将调用内部元素上注册的事件处理程序，输出 "Clicked the inner element!"。 - 事件冒泡阶段：点击事件继续向上传播，由于没有在文档根节点上注册冒泡事件处理程序，冒泡过程停止。 三、阻止事件冒泡 有时候，我们可能希望阻止事件继续向上冒泡，例如在内部元素点击事件中阻止外部元素上的点击事件被触发。为此，我们可以使用事件对象的 `stopPropagation()` 方法来停止事件传播。 下面是修改后的内部元素点击事件处理程序代码：

function innerClick(event) {
  console.log("Clicked the inner element!");
  event.stopPropagation();
}

当我们点击内部元素时，现在只会触发目标元素的点击事件处理程序，不再触发外部元素的点击事件处理程序。 四、事件委托与事件冒泡 事件委托是一种利用事件冒泡机制来减少事件处理程序数量的技术。它基于的原理是，在父级元素上注册一个事件处理程序，然后根据事件的目标元素来执行相应的操作。 例如，假设我们有一个包含多个按钮的列表，我们希望当点击任何一个按钮时都发生相同的操作。使用事件委托，我们可以将事件处理程序注册在整个列表上，而不是为每个按钮分别注册处理程序。 下面是一个基本的示例：

<ul id="button-list">
  <li><button>Button 1</button></li>
  <li><button>Button 2</button></li>
  <li><button>Button 3</button></li>
</ul>

JavaScript 代码：

var buttonList = document.getElementById("button-list");

buttonList.addEventListener("click", function(event) {
  if (event.target && event.target.nodeName === "BUTTON") {
    console.log("Clicked button with text: " + event.target.textContent);
  }
});

当我们点击列表中的任何一个按钮时，会触发事件冒泡，而事件委托会根据点击的目标元素来执行相应的操作，输出目标按钮的文本内容。 总结 事件冒泡是 JavaScript 中常见的事件传播机制之一。通过了解事件传播的不同阶段和使用示例，我们可以更好地理解事件冒泡的概念和用途。同时，阻止事件冒泡和使用事件委托也是我们在开发中常用的技巧，可以提高代码的可维护性和性能。希望这篇文章对您理解 JavaScript 中的事件冒泡机制有所帮助。