DOM Event：终止事件流动

阅读本文需要理解事件流动机制，可以查阅之前的DOM Event：事件流动（Event Flow）。

我们知道一个事件被浏览器捕获后会元素间流动，像这样：

document    1    7
            v    ^
body        2    6
            v    ^
div         3    5
            v    ^
button         4

事件会依次在这些元素间触发。
但我们有没有可能在中间阻止事件的继续传递呢？答案是有的，Event接口提供了两个阻止事件流动相关的API：

• stopPropagation，终止事件在元素间的传递，但同一元素上的监听能继续触发
• stopImmediatePropagation，终止事件

stopPropagation

该方法停止事件在元素间传递，但同一元素上的监听能继续触发。例如：

// button上监听并调用stopPropagation
buttonElement.addEventListener('click', (event) => {
  console.log('1');
  event.stopPropagation();
});

// button上继续监听，不会被上面的stopPropagation影响
buttonElement.addEventListener('click', (event) => {
  console.log('2');
});

// div上监听，事件已不能传到这里
divElement.addEventListener('click', (event) => {
  console.log('3');
});

上面这段代码的输出是：

1
2

stopImmediatePropagation

该方法会直接终止事件。事件不但不能在元素间传递，就算在同一元素上的后续监听都会被取消：

// button上监听并调用stopImmediatePropagation
buttonElement.addEventListener('click', (event) => {
  console.log('1');
  event.stopImmediatePropagation();
});

// button上继续监听，因stopImmediatePropagation的调用不会被执行
buttonElement.addEventListener('click', (event) => {
  console.log('2');
});

// div上监听，事件已不能传到这里
divElement.addEventListener('click', (event) => {
  console.log('3');
});

上面这段代码的输出是：

1

---

注意，上述两个事件只是停止了事件流动，而没有“阻止浏览器默认行为”（prevent default browser events）；若你想阻止元素的默认行为，你依然需要额外调用preventDefault。