JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法

JavaScript中的事件流模型分为“捕获阶段”和“冒泡阶段”两个阶段。事件从最外层元素一直传递到目标元素，然后再传递回最外层元素。整个过程可以理解为一颗DOM树的遍历过程。

对于一个元素上的事件，由于事件的传递和处理是需要时间的，因此我们可以通过阻止事件的传递，来控制事件的执行次数或是终止事件的执行。

捕获/阻止捕获

在DOM树的遍历过程中，先触发最外层元素上的事件，然后沿着DOM树的路径向目标元素逐步传递。这个过程可以称为事件捕获。

事件捕获可以使用addEventListener()方法来指定，在参数中设置useCapture=true即可。阻止事件捕获可以使用stopPropagation()方法来实现。

示例1：阻止事件的捕获过程

<div id="outer">
  <div id="inner">Click me!</div>
</div>

document.getElementById('outer').addEventListener('click', function() {
  console.log('outer clicked');
}, true);
document.getElementById('inner').addEventListener('click', function(event) {
  event.stopPropagation(); // 阻止事件的捕获过程
  console.log('inner clicked');
});

在这个示例中，我们在外层元素和内层元素上都添加了click事件的监听函数。当我们点击内层div元素时，由于设置了event.stopPropagation()方法，因此只有内层元素的事件监听函数会被执行，而不会执行外层元素的事件监听函数。

冒泡/阻止冒泡

在到达目标元素后，事件会返回到最外层元素，这个过程可以称为事件冒泡。

事件冒泡可以使用addEventListener()方法来指定，在参数中设置useCapture=false即可。阻止事件冒泡可以使用stopPropagation()方法来实现。

示例2：阻止事件的冒泡过程

<div id="outer">
  <div id="inner">Click me!</div>
</div>

document.getElementById('inner').addEventListener('click', function(event) {
  event.stopPropagation(); // 阻止事件的冒泡过程
  console.log('inner clicked');
});
document.getElementById('outer').addEventListener('click', function() {
  console.log('outer clicked');
});

在这个示例中，我们在外层元素和内层元素上都添加了click事件的监听函数。当我们点击内层div元素时，由于设置了event.stopPropagation()方法，因此只有内层元素的事件监听函数会被执行，不会执行外层元素的事件监听函数。这个示例和示例1中的代码几乎相同，只是将useCapture设置为默认值false，实现了阻止事件的冒泡过程。