事件传播技术问询：能否为同一元素的同一事件添加多个监听器？

Event接口的stopImmediatePropagation()方法可阻止同一事件的其他监听器被调用。
如果为同一元素的同一事件类型附加了多个监听器，它们将按照添加顺序被调用。若在某次调用中触发stopImmediatePropagation()，则剩余监听器都不会被调用。

下面是一个简单示例，直观展示同一元素绑定同一事件的多个监听器时，stopImmediatePropagation()的作用：

<button id="testBtn">点击我</button>
<script>
const btn = document.getElementById('testBtn');

// 第一个点击监听器
btn.addEventListener('click', (event) => {
  console.log('第一个监听器执行');
  // 调用该方法，阻止后续监听器触发
  event.stopImmediatePropagation();
});

// 第二个点击监听器
btn.addEventListener('click', () => {
  console.log('第二个监听器执行');
});

// 第三个点击监听器
btn.addEventListener('click', () => {
  console.log('第三个监听器执行');
});
</script>

效果说明： #

点击按钮后，控制台只会输出 第一个监听器执行，因为第一个监听器里的stopImmediatePropagation()直接阻断了后续两个监听器的执行。

如果把event.stopImmediatePropagation()这一行注释掉，点击按钮时控制台会按绑定顺序输出三条日志：

第一个监听器执行
第二个监听器执行
第三个监听器执行

内容的提问来源于stack exchange，提问作者user19481364