这篇文章将介绍什么是事件参数中的JavaScriptstopPropagation 和stopImmediatePropagation 方法以及它们之间的区别。我们还将介绍什么是事件捕获以及它对这些方法的影响：
StopPropagation
最近的一篇文章介绍了事件冒泡。这是一个在一个元素上执行事件处理程序的过程，然后是它的父级，然后是它的父级 ...
该 stopPropagation方法在一个事件参数对象中可用。当在一个事件处理程序中调用时，它会停止冒泡过程。
例如，如果我们有下面的HTML：
<div class="container">
<button class="btn">Click me</button>
</div>
...并且我们有以下的事件处理程序：
const container = document.querySelector(
".container"
);
container.addEventListener("click", function(e) {
console.log("container click", e);
});
const btn = document.querySelector(".btn");
btn.addEventListener("click", function(e) {
e.stopPropagation();
console.log("btn click", e);
});
......而用户点击了按钮......
... div容器上的事件处理程序将不会被调用。
stopImmediatePropagation
让我们为按钮添加第二个事件处理程序：
btn.addEventListener("click", function(e) {
e.stopPropagation();
console.log("btn click 1", e);
});
btn.addEventListener("click", function(e) { e.stopImmediatePropagation(); console.log("btn click 2", e);});
当用户点击按钮时，这次两个按钮处理程序都会被调用，而DIV容器的处理程序仍未到达：
如果我们想阻止按钮上的第二个处理程序被调用呢？那么，这就是 stopImmediatePropagation做的：
btn.addEventListener("click", function(e) {
e.stopImmediatePropagation(); console.log("btn click 1", e);
});
所以，stopImmediatePropagation ，阻止元素上的其他事件处理程序被执行，防止事件冒泡。
很好!
事件捕获
事件捕获是发生在冒泡阶段之前的一个事件阶段。在这个过程中，事件沿着DOM树从窗口到目标元素。我们可以使用capture 选项将事件处理程序附加到捕获阶段而不是冒泡阶段：
container.addEventListener(
"click",
function(e) {
console.log("container click", e);
},
{ capture: true });
如果用户点击了按钮，我们看到现在是容器div首先处理事件：
stopPropagation 在捕获阶段的作用和在冒泡阶段的作用一样--它可以阻止在该阶段后面的其他事件处理程序被执行。
让我们把stopPropagation 添加到容器div的处理程序中：
container.addEventListener(
"click",
function(e) {
e.stopPropagation(); console.log("container click", e);
},
{ capture: true }
);
如果用户点击了这个按钮，我们看到只有容器div处理程序被执行。
所以，即使其他事件处理程序处于冒泡阶段，它们也不会被执行。这是因为捕获阶段在冒泡阶段之前，而且stopPropagation ，无论它处于哪个阶段，都会阻止后来的处理程序。
🏃玩转代码
包裹起来
stopPropagation 允许同一元素上的其他事件处理程序被执行，而 则阻止了这一点。 和 则阻止了在捕获和冒泡阶段的后期事件处理程序被执行。stopImmediatePropagation stopPropagation stopImmediatePropagation
