嵌套元素点击事件的执行顺序由事件流机制决定，具体取决于监听器注册时是否指定了 capture 选项。默认情况下（即不指定该选项），事件遵循冒泡机制，从最内层的目标元素开始，逐级向上传递至根节点；若指定 capture: true，则事件遵循捕获机制，从根节点开始，逐级向下传递至目标元素。因此，确定执行顺序的关键在于区分每个父级元素的监听器是处于捕获阶段还是冒泡阶段。
如何验证默认情况下的事件传播路径
在默认配置下，点击嵌套的 inner 元素会触发从 inner 到 outer 再到 document 的冒泡过程。通过为各层添加简单的日志输出，可以直观地观察到这一自底向上的执行顺序。
<div id="outer">
<div id="inner">Click Me</div>
</div>
<script>
document.getElementById('outer').addEventListener('click', function() {
console.log('Outer Bubble');
});
document.getElementById('inner').addEventListener('click', function() {
console.log('Inner Target');
});
</script>
预期结果：控制台依次打印 "Inner Target" 和 "Outer Bubble"。
如何改变事件传播方向以优先处理父级逻辑
当需要在子元素被点击前拦截或处理逻辑时，可以通过在父级元素的 addEventListener 中设置第三个参数为 true 来启用捕获阶段监听。此时，事件流将变为自上而下的捕获过程，父级监听器将在子级监听器之前执行。
<div id="outer">
<div id="inner">Click Me</div>
</div>
<script>
document.getElementById('outer').addEventListener('click', function() {
console.log('Outer Capture');
}, true);
document.getElementById('inner').addEventListener('click', function() {
console.log('Inner Target');
});
</script>
预期结果：控制台依次打印 "Outer Capture" 和 "Inner Target"。
stopPropagation 对后续事件执行的影响是什么
如果在事件传播过程中调用了 event.stopPropagation()，当前事件将不再继续向后续阶段或相邻层级传播。例如，在冒泡阶段的 inner 元素中调用该方法，outer 元素的冒泡监听器将不会被触发；同样，若在捕获阶段的 outer 中调用，inner 的目标监听器也不会执行。这允许开发者精确控制事件流的终止点。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
