2023关于JS中的事件冒泡、事件捕获、事件委托，我总结了这些

前言

在JavaScript中，事件处理程序有三种执行方式：事件冒泡、事件捕获和事件委托。本文将详细介绍这三种方式，并提供相应的代码示例。

事件冒泡

事件冒泡是指从最具体的元素逐级向上传播事件，直到文档中的所有元素都已经被检查过为止。例如，当单击一个按钮时，单击事件会依次向上传播到该按钮的父元素、祖父元素等，直到最终到达文档对象。在事件冒泡过程中，可以通过event.target或this来获取事件源，也可以通过event.stopPropagation()来阻止事件继续向上传播。

以下是一个事件冒泡的示例代码：

const btn = document.querySelector('#btn');
const parent = document.querySelector('#parent');
const grandparent = document.querySelector('#grandparent');

btn.addEventListener('click', () => {
  console.log('Button clicked');
});

parent.addEventListener('click', () => {
  console.log('Parent clicked');
});

grandparent.addEventListener('click', () => {
  console.log('Grandparent clicked');
});

当单击按钮时，控制台将输出：

Button clicked
Parent clicked
Grandparent clicked

事件捕获

事件捕获是指从文档中的根节点开始，逐级向下查找元素，直到到达事件的目标元素。例如，当单击一个按钮时，单击事件会从文档根节点开始向下查找该按钮的父元素、祖父元素等，直到最终到达该按钮元素。在事件捕获过程中，可以通过event.target或this来获取事件源，也可以通过event.stopPropagation()来阻止事件继续向上冒泡。

以下是一个事件捕获的示例代码：

const btn = document.querySelector('#btn');
const parent = document.querySelector('#parent');
const grandparent = document.querySelector('#grandparent');

btn.addEventListener('click', () => {
  console.log('Button clicked');
}, true);

parent.addEventListener('click', () => {
  console.log('Parent clicked');
}, true);

grandparent.addEventListener('click', () => {
  console.log('Grandparent clicked');
}, true);

当单击按钮时，控制台将输出：

Grandparent clicked
Parent clicked
Button clicked

事件委托

事件委托是指将事件处理程序添加到其父元素而不是每个子元素上，以减少内存占用和提高性能。例如，当单击一个列表项时，可以将单击事件处理程序添加到该列表的父元素上，而不是每个列表项上。在事件委托过程中，可以通过event.target或this来获取事件源，也可以通过event.stopPropagation()来阻止事件继续向上传播。

以下是一个事件委托的示例代码：

const list = document.querySelector('#list');

list.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log(`Item ${event.target.textContent} clicked`);
  }
});

当单击列表中的任何一个列表项时，控制台将输出类似如下的内容：

Item 1 clicked

以上就是JavaScript中的事件冒泡、事件捕获和事件委托的详细解释和代码示例。希望本文对您有所帮助！