AI生成-事件冒泡与事件捕获原理_ai算法识别生成事件-CSDN博客

本文链接：https://blog.csdn.net/weixin_40589472/article/details/131240484

事件冒泡与事件捕获是 JavaScript 中的两种事件传播方式。

事件冒泡

事件冒泡是从事件的最深层元素开始，逐级向上传播到最外层元素的过程。例如，当点击一个按钮时，事件会首先被传递到最内层的按钮元素，然后逐级向上传播到包含该按钮元素的更外层的元素。这个过程可以用一个流程图来表示：

   ┌───────────────────────┐
   │                       │
   │   ┌───────────────┐   │
   │   │   button      │   │
   │   └───────────────┘   │
   │          ▲            │
   │          │            │
   │   ┌───────────────┐   │
   │   │      div      │   │
   │   └───────────────┘   │
   │          ▲            │
   │          │            │
   │   ┌───────────────┐   │
   │   │      body     │   │
   │   └───────────────┘   │
   │                       │
   └───────────────────────┘

在上面的图中，当点击按钮时，事件会首先传递到按钮元素，然后逐步向上传播到包含按钮元素的更外层元素，直到传递到最上层的 body 元素。

事件捕获

事件捕获与事件冒泡相反，是从事件的最外层元素开始，逐级向下传播到最深层元素的过程。例如，当点击一个按钮时，事件会首先被传递到最外层元素（例如 body 元素），然后逐级向下传播到包含该按钮元素的更深层的元素。这个过程可以用一个流程图来表示：

   ┌───────────────────────┐
   │                       │
   │   ┌───────────────┐   │
   │   │      body     │   │
   │   └───────────────┘   │
   │          ▼            │
   │          │            │
   │   ┌───────────────┐   │
   │   │      div      │   │
   │   └───────────────┘   │
   │          ▼            │
   │          │            │
   │   ┌───────────────┐   │
   │   │   button      │   │
   │   └───────────────┘   │
   │                       │
   └───────────────────────┘

在上面的图中，当点击按钮时，事件会首先传递到最外层元素 body，然后逐步向下传播到包含按钮元素的更深层元素，直到传递到按钮元素。

如何使用事件冒泡和事件捕获？

在 JavaScript 中，事件默认使用的是事件冒泡模型。如果要使用事件捕获模型，可以在注册事件处理程序时使用 addEventListener 方法，并把第三个参数设置为 true，例如：

element.addEventListener('click', function(event) {
  // 处理事件
}, true);

在上面的例子中，true 表示使用事件捕获模型。

事件冒泡和事件捕获的示例代码

下面是一个简单的示例，演示了事件冒泡和事件捕获的区别：

<!DOCTYPE html>
<html>
<head>
  <title>事件冒泡和事件捕获的示例</title>
</head>
<body>
  <div id="outer" style="background-color: #f0f0f0; padding: 50px;">
    <div id="inner" style="background-color: #ccc; padding: 30px;">
      <button id="button">点击我</button>
    </div>
  </div>

  <script>
    var outer = document.getElementById('outer');
    var inner = document.getElementById('inner');
    var button = document.getElementById('button');

    outer.addEventListener('click', function(event) {
      console.log('外层元素被点击');
    }, true);

    inner.addEventListener('click', function(event) {
      console.log('内层元素被点击');
    }, true);

    button.addEventListener('click', function(event) {
      console.log('按钮被点击');
    }, true);
  </script>
</body>
</html>