DOM事件流

  DOM事件流描述了在HTML文档中，事件是如何从触发元素传播到文档根节点的过程。

DOM事件流

  DOM事件流分为三个阶段：捕获阶段（Capturing Phase）、目标阶段（Target Phase）和冒泡阶段（Bubbling Phase）。

捕获阶段（Capturing Phase）：

• 事件从文档根节点开始向下传播，经过父级元素直到目标元素。
• 在捕获阶段，事件的捕获处理器（capture handlers）会被依次触发，但默认情况下，元素上并没有捕获处理器。

目标阶段（Target Phase）：

• 事件到达目标元素，即事件的触发元素。
• 在目标阶段，事件的处理器会被触发。这是事件的主要处理阶段。

冒泡阶段（Bubbling Phase）：

• 事件从目标元素开始向上冒泡，经过父级元素直到文档根节点。
• 在冒泡阶段，事件的冒泡处理器（bubble handlers）会被依次触发。

  事件流的默认顺序是先捕获后冒泡。也就是说，事件首先在捕获阶段被处理，然后在目标阶段处理，最后在冒泡阶段处理。

案例

<div id="parent">
  <div id="child">
    Click me!
  </div>
</div>

document.getElementById('parent').addEventListener('click', function(event) {
  console.log('Parent - Bubbling');
}, false);

document.getElementById('child').addEventListener('click', function(event) {
  console.log('Child - Target');
}, false);

document.getElementById('parent').addEventListener('click', function(event) {
  console.log('Parent - Capturing');
}, true);

  在上述示例中，当点击 “Click me!” 的子元素时，事件的触发顺序如下：

1. 捕获阶段（由父级元素到目标元素）：

•   触发父元素的捕获处理器：console.log(‘Parent - Capturing’);

2. 目标阶段：

•   触发目标元素的处理器：console.log(‘Child - Target’);

3. 冒泡阶段（由目标元素到父级元素）：

•   触发父元素的冒泡处理器：console.log(‘Parent - Bubbling’);

  输出结果为：

Parent - Capturing
Child - Target
Parent - Bubbling

阻止冒泡 event.stopPropagation()

• 当调用 event.stopPropagation() 时，它会立即停止事件在DOM树中的传播，阻止事件继续传递到其他元素上的事件处理器。

示例 :

<div id="parent">
  <div id="child">
    Click me!
  </div>
</div>

document.getElementById('parent').addEventListener('click', function(event) {
  console.log('Parent clicked.');
});

document.getElementById('child').addEventListener('click', function(event) {
  console.log('Child clicked.');
  event.stopPropagation(); // 阻止事件继续传播
});

  在上述示例中，当点击 “Click me!” 的子元素时，事件会首先触发子元素的点击事件处理器，然后立即停止事件的传播，阻止其向父元素继续传递。因此，父元素的点击事件处理器不会被触发。
输出结果为：

Child clicked.

  通过调用 event.stopPropagation()，我们可以选择性地阻止事件的传播，只在需要的元素上处理事件，而不会影响其他元素