深入浅出：Javascript 事件捕获和事件冒泡

前端

2024-01-14 21:41:27

在 Javascript 的交互式世界中，事件捕获和事件冒泡是两个基本的机制，它们共同协作以处理用户交互和 DOM 操作。了解这些机制对于编写高效且响应迅速的 web 应用程序至关重要。

事件捕获与事件冒泡：简介

当用户与 DOM 元素进行交互（例如，单击按钮、移动鼠标或键盘按下）时，会触发事件。这些事件可以由浏览器直接处理，也可以由挂接到 DOM 元素上的事件侦听器处理。

事件捕获 是一种事件处理机制，它从 DOM 根节点开始向下遍历 DOM 树，检查每个节点是否挂接了与触发事件匹配的事件侦听器。如果找到匹配的侦听器，则会立即调用它，即使该节点不是触发事件的元素。

事件冒泡 是一种事件处理机制，它从触发事件的元素开始，向上遍历 DOM 树，检查每个祖先节点是否挂接了与触发事件匹配的事件侦听器。如果找到匹配的侦听器，则会依次调用它，直到到达 DOM 根节点。

事件流：捕获和冒泡顺序

DOM 标准事件流规定，当触发 DOM 事件时，事件处理的顺序为：

捕获阶段： 事件从 DOM 根节点开始向下遍历，触发所有具有匹配侦听器的祖先节点。
目标阶段： 事件到达触发事件的元素，触发该元素上挂接的事件侦听器。
冒泡阶段： 事件继续向上遍历 DOM 树，触发所有具有匹配侦听器的后代节点。

利用捕获和冒泡

捕获和冒泡机制提供了一种灵活的方式来处理 DOM 事件。

事件捕获 通常用于在 DOM 树的早期阶段处理事件，例如在文档加载时或用户输入时。这允许您在事件到达目标元素之前对其进行拦截和处理。

事件冒泡 通常用于在 DOM 树的任何级别处理事件，允许您为多个元素注册同一事件侦听器。这简化了事件处理，因为您不必为每个元素编写单独的侦听器。

实例：使用事件捕获和冒泡

以下示例演示了如何使用事件捕获和事件冒泡来处理按钮单击事件：

// 事件捕获
document.addEventListener("click", function(event) {
  console.log("捕获阶段：所有节点");
}, true);

// 目标阶段
document.querySelector("button").addEventListener("click", function(event) {
  console.log("目标阶段：目标元素");
});

// 事件冒泡
document.addEventListener("click", function(event) {
  console.log("冒泡阶段：所有节点");
}, false);