JavaScript中DOM事件流是怎么回事呢？-CSDN博客

本文链接：https://blog.csdn.net/ifeng618/article/details/134627131

什么是DOM事件流？

DOM事件流是指当事件在DOM树中触发时，它是如何在各个元素之间传播的过程。DOM事件流包括三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段。在事件捕获阶段，事件从根节点开始向下传播，直到达到触发事件的目标元素。在目标阶段，事件在目标元素上触发。最后，在事件冒泡阶段，事件从目标元素开始向上冒泡，直到达到根节点。

语法:element.addEventListener(event, function, useCapture)
注意:在addeventListener()的第三个参数(useCapture)设为true，就会在捕获阶段运行，默认是false冒泡）

事件捕获阶段

在事件捕获阶段，事件从根节点开始向下传播，直到达到触发事件的目标元素。在这个阶段，事件会经过DOM树的每个祖先元素，直到达到目标元素。可以使用addEventListener方法来在事件捕获阶段监听事件。

下面是一个示例代码，演示了如何在事件捕获阶段监听事件：

const container = document.getElementById('container');
const innerElement = document.getElementById('innerElement');

container.addEventListener('click', () => {
  console.log('我是父亲元素');
}, true);

innerElement.addEventListener('click', () => {
  console.log('我是儿子元素');
}, true);

在上面的代码中，我们分别在container和innerElement元素上监听了click事件，并将事件处理程序设置为在事件捕获阶段触发。当我们点击innerElement元素时，控制台将输出以下内容：

我是父亲元素
我是儿子元素

这是因为事件从根节点开始向下传播，先到达container元素，然后再到达innerElement元素。

目标阶段

在目标阶段，事件在目标元素上触发。可以使用addEventListener方法来在目标阶段监听事件。

下面是一个示例代码，演示了如何在目标阶段监听事件：

const innerElement = document.getElementById('innerElement');

innerElement.addEventListener('click', () => {
  console.log('Inner element clicked during target phase');
});

在上面的代码中，我们在innerElement元素上监听了click事件，并将事件处理程序设置为在目标阶段触发。当我们点击innerElement元素时，控制台将输出以下内容：

Inner element clicked during target phase

事件冒泡阶段

在事件冒泡阶段，事件从标目元素开始向上冒泡，直到达到根节点。可以使用addEventListener方法来在事件冒泡阶段监听事件。

下面是一个示例代码，演示了如何在事件冒泡阶段监听事件：

const container = document.getElementById('container');
const innerElement = document.getElementById('innerElement');

container.addEventListener('click', () => {
  console.log('我是父元素');
});

innerElement.addEventListener('click', () => {
  console.log('我是子元素');
});

在上面的代码中，我们分别在container和innerElement元素上监听了click事件，并将事件处理程序设置为在事件冒泡阶段触发。当我们点击innerElement元素时，控制台将输出以下内容：

我是子元素
我是父元素

这是因为事件从目标元素开始向上冒泡，先到达innerElement元素，然后再到达container元素。

阻止事件传播

有时候，我们可能需要阻止事件在DOM树中的传播。可以使用stopPropagation方法来阻止事件的进一步传播。

下面是一个示例代码，演示了如何阻止事件传播：

const container = document.getElementById('container');
const innerElement = document.getElementById('innerElement');

container.addEventListener('click', (event) => {
  console.log('Container clicked');
  event.stopPropagation();
});

innerElement.addEventListener('click', () => {
  console.log('Inner element clicked');
});

在上面的代码中，当我们点击innerElement元素时，控制台将只输出以下内容：

Inner element clicked

这是因为在container元素的事件处理程序中，我们调用了event.stopPropagation()方法，阻止了事件的进一步传播(冒泡)。

事件委托

<!DOCTYPE html>
<html>
<head>
  <title>事件委托示例</title>
</head>
<body>
  <div id="parent">
    <button class="child">按钮 1</button>
    <button class="child">按钮 2</button>
    <button class="child">按钮 3</button>
  </div>

  <script>
    // 获取父元素
    var parent = document.getElementById('parent');

    // 事件委托的处理程序
    function handleClick(event) {
      // 检查点击的元素是否为子元素
      if (event.target.classList.contains('child')) {
        // 在控制台打印被点击的按钮文本
        console.log('点击了按钮:', event.target.textContent);
      }
    }

    // 将事件处理程序绑定到父元素上
    parent.addEventListener('click', handleClick);
  </script>
</body>
</html>

在上面的代码中，我们首先获取了父元素 parent，然后定义了一个事件处理程序 handleClick。在 handleClick 中，我们检查被点击的元素是否具有 child 类名，如果是，则在控制台打印被点击的按钮文本。

最后，我们使用 addEventListener 方法将事件处理程序 handleClick 绑定到父元素 parent 的 click 事件上。这样，当点击子元素时，事件会冒泡到父元素，并由父元素的事件处理程序处理。

通过使用事件委托，我们可以避免为每个子元素都绑定事件处理程序，而是将事件处理程序绑定到父元素上，从而提高性能和代码的可维护性。

进阶网址

MDN Web 文档：MDN（Mozilla Developer Network）是一个权威的Web开发文档资源，提供了关于DOM事件流的详细解释和示例代码。您可以访问以下链接来了解更多信息：
- DOM 事件流
- 事件流的三个阶段
JavaScript.info：这是一个非常全面的JavaScript教程网站，提供了关于DOM事件流的深入解释和示例代码。您可以访问以下链接来学习更多：
- 事件冒泡和事件捕获
- 事件委托
W3Schools：W3Schools是一个广为人知的Web开发教程网站，提供了关于DOM事件流的简单易懂的教程和示例代码。您可以访问以下链接来学习更多：
- JavaScript 事件流