MDN事件处理三阶段中Target阶段为何触发两次？

事件流的三个阶段（MDN定义） #

现代浏览器的事件处理分为三个阶段：

1. 捕获阶段：从最顶层元素向下传播到目标元素的父元素
2. 目标阶段：事件实际发生的目标元素本身
3. 冒泡阶段：从目标元素的父元素向上传播回最顶层元素

核心疑惑 #

原本认为这三个阶段相互独立，但实际演示中发现目标阶段的事件触发了两次，疑惑为何不是仅触发一次，或是目标阶段是否和捕获、冒泡阶段存在关联？

原因解析 #

你看到的目标阶段触发两次，本质是给目标元素同时绑定了「捕获模式」和「冒泡模式」的事件监听器。

浏览器的事件流规则里，当事件走到目标元素时，不会区分监听器是捕获模式（useCapture: true）还是冒泡模式（useCapture: false）——只要是绑定在目标元素上的监听器，都会在目标阶段被触发。

举个代码例子：

const target = document.getElementById('target');
// 冒泡模式绑定
target.addEventListener('click', () => console.log('目标元素-冒泡回调'), false);
// 捕获模式绑定
target.addEventListener('click', () => console.log('目标元素-捕获回调'), true);

点击这个目标元素时，两个回调都会执行，控制台会输出两条日志，看起来就像是目标阶段触发了两次。

这并不是三个阶段不独立，而是目标元素的监听器不受捕获/冒泡阶段的传播规则限制，所有绑定在它身上的事件处理函数，都会在目标阶段执行。

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