捕获 JavaScript

在 JavaScript 中，捕获是指通过代码捕获用户发起的事件并对其作出响应。JavaScript 中有很多事件，比如鼠标点击、键盘按键等。我们可以使用 JavaScript 中的事件监听器来捕获这些事件。

监听事件

在 JavaScript 中，我们可以为页面上的元素添加事件监听器来捕获事件。最常用的事件监听器是 addEventListener 方法，该方法用于添加事件监听器。

以下是 addEventListener 方法的基本语法：

element.addEventListener(event, function, useCapture);

• element：要添加监听器的元素
• event：要捕获的事件类型
• function：事件发生时要执行的函数
• useCapture：可选参数，表示监听器是否在捕获阶段执行。默认值为 false（在冒泡阶段执行）。

例如，我们可以为一个按钮添加点击事件监听器：

const button = document.querySelector('#myButton');
button.addEventListener('click', function() {
  console.log('按钮被点击了！');
});

捕获事件的传播

当一个元素上发生事件时，事件将从该元素开始在 DOM 树上进行传播，直到到达文档的根节点。在传播过程中，会经历两个阶段：捕获阶段和冒泡阶段。

捕获阶段是从文档根节点到目标元素的传播过程。在这个阶段，事件会从文档根节点向下传播，直到到达目标元素。如果在这个阶段被添加了事件监听器，事件发生时将会触发这些监听器。

冒泡阶段是从目标元素到文档根节点的传播过程。在这个阶段，事件会从目标元素向上传播，直到到达文档根节点。如果在这个阶段被添加了事件监听器，事件发生时将会触发这些监听器。

默认情况下，事件监听器会在冒泡阶段执行。但是，我们也可以在添加监听器时设置 useCapture 参数为 true，使其在捕获阶段执行。

例如，我们可以给一个包含多个子元素的容器元素添加点击事件监听器，并在捕获阶段输出每个子元素的标签名：

const container = document.querySelector('#myContainer');
container.addEventListener('click', function(event) {
  console.log('捕获阶段：' + event.target.tagName);
}, true);

阻止事件的传播

有时候，我们需要阻止事件在 DOM 树上继续传播。可以使用 stopPropagation() 方法来阻止事件传播。

例如，我们可以给一个按钮添加点击事件监听器，并在监听器内阻止事件传播：

const button = document.querySelector('#myButton');
button.addEventListener('click', function(event) {
  console.log('按钮被点击了！');
  event.stopPropagation();
});

阻止事件的默认行为

在浏览器中，某些元素上的某些事件会有默认的行为。例如，点击超链接会跳转到链接的地址。如果我们需要阻止事件的默认行为，可以使用 preventDefault() 方法。

例如，我们可以给一个超链接添加点击事件监听器，并在监听器内阻止事件的默认行为：

const link = document.querySelector('#myLink');
link.addEventListener('click', function(event) {
  console.log('超链接被点击了！');
  event.preventDefault();
});

以上就是 JavaScript 中捕获事件的基本方法和操作。