在javascript中，多个监听器的执行顺序由注册时指定的 usecapture 参数决定：先按文档流从上到下执行所有捕获阶段（true）的监听器，再执行目标元素上的监听器，最后按从下到上执行所有冒泡阶段（false）的监听器。如果未指定该参数，默认值为 false，即只参与冒泡阶段。
如何验证不同注册顺序下的触发时机
通过在同一父元素和子元素上分别以捕获和冒泡模式注册监听器，可以观察到明确的执行顺序差异。当点击子元素时，事件会先从父元素向下传播（捕获），到达子元素后触发其自身监听器，最后向上传播回父元素（冒泡）。以下代码演示了这种机制：
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
// 父元素捕获阶段
parent.addEventListener('click', () => console.log('Parent Capture'), true);
// 子元素冒泡阶段
child.addEventListener('click', () => console.log('Child Bubble'), false);
// 父元素冒泡阶段
parent.addEventListener('click', () => console.log('Parent Bubble'), false);
</script>
预期输出为：
1. Parent Capture
2. Child Bubble
3. Parent Bubble
相同模式下多个监听器的执行顺序是怎样的
当多个监听器注册在同一个元素且使用相同的 useCapture 值时，它们严格按照注册的先后顺序执行。这意味着后注册的监听器会在先注册的监听器之后被调用。这一行为在调试或需要特定处理顺序时非常关键。例如，如果在同一元素上连续注册两个冒泡阶段的监听器，第二个将在第一个完成后执行。以下代码展示了这一特性：
<button id="btn">Test Order</button>
<script>
const btn = document.getElementById('btn');
btn.addEventListener('click', () => console.log('First Listener'), false);
btn.addEventListener('click', () => console.log('Second Listener'), false);
btn.addEventListener('click', () => console.log('Third Listener'), false);
// 点击按钮将依次输出：
// First Listener
// Second Listener
// Third Listener
</script>
基于removeEventListener移除特定监听器后的影响
如果使用 removeEventListener 移除了某个监听器，它将不再参与后续的事件传播过程。需要注意的是，移除时必须提供与注册时完全相同的函数引用，否则无法成功移除。此外，移除操作不会影响其他已注册监听器的执行顺序。例如，若在前述示例中移除了“First Listener”，则点击按钮时将只输出“Second Listener”和“Third Listener”。这要求开发者在管理复杂事件逻辑时，务必保持对监听器引用的准确追踪。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
