JavaScript全局监听器派发事件时如何指定Event.currentTarget

以下为基础场景示例代码，运行表现符合预期：event.currentTarget的指向与直接点击按钮时完全一致。

var button1 = document.querySelector('.button1');
button1.addEventListener('click', function (e) {
    alert(`Button1 was clicked!\nEvent currentTarget: ${e.currentTarget} .${e.currentTarget.className}`);
});

var event = new Event('click');
button1.dispatchEvent(event);

<p>if you load the page a button click will be dispatched</p>

<button class="button1">Button1: If you click me I wil open an alert</button>

<p>Expected Output: "Button1 was clicked! [object HTMLButtonElement] .button1"</p>

疑问：为何监听器绑定在document上时表现存在差异？ #

此时event.currentTarget指向事件流当前所处节点，而非调用dispatchEvent方法的元素。

var button1 = document.querySelector('.button1');
document.addEventListener('click', function (e) {
    alert(`Button1 was clicked!\nEvent.currentTarget: ${e.currentTarget} .${e.currentTarget.className}`);
});

var event = new Event('click');
button1.dispatchEvent(event);

<p>Click anywhere besides the button itself to see the difference!</p>

<button class="button1">Button1: If you click me I wil open an alert</button>

<p>Expected Output: "Button1 was clicked! [object HTMLButtonElement] .button1"</p>
<p>Actual Output: "Button1 was clicked! [object HTMLHtmlElement]"</p>

是否可以强制指定event.currentTarget取值？ #

我希望使用全局监听器统一处理多类交互逻辑，通过判断event.target识别触发点击的按钮。

核心诉求：如何在保留全局事件监听器的前提下，区分普通页面点击与针对按钮手动派发的点击事件？

解答 #

现象原因 #

这是DOM事件流的标准行为，不存在异常：

• event.currentTarget是只读属性，永远指向当前正在执行的事件监听器所绑定的节点，和事件触发方式、dispatchEvent的调用节点没有直接关系。
• 调用button1.dispatchEvent(event)派发的事件会走完整DOM事件流：先从根节点向下进入捕获阶段，到达button1后执行目标阶段监听器，之后向上进入冒泡阶段，依次触发路径上所有父节点（包括body、html、document）绑定的对应类型监听器。
• 示例中输出[object HTMLHtmlElement]，是事件冒泡到html节点时触发监听器的结果；如果监听器确实绑定在document上，事件继续冒泡到document时会再次触发，此时currentTarget指向document。

能否强制修改event.currentTarget #

不能。该属性由事件引擎在事件流过程中自动赋值，JavaScript层面无法手动改写。

全局监听器下的实现方案 #

不需要修改currentTarget，用以下方式即可满足需求：

1. 通过event.target获取原始触发源
   不管事件流走到哪个节点，event.target永远指向最初触发事件的元素（也就是调用dispatchEvent的按钮节点），直接用这个属性判断触发源即可，无需依赖currentTarget。

2. 区分手动派发事件和用户真实点击

   • 方案一：用标准属性event.isTrusted判断。所有用户真实交互触发的事件，该属性值为true；所有脚本通过dispatchEvent派发的事件，该属性值为false，无需额外修改代码即可区分。

     document.addEventListener('click', function(e) {
       if (e.isTrusted) {
         // 用户真实点击逻辑
       } else {
         // 脚本手动派发的点击逻辑
         const triggerButton = e.target;
       }
     })
     

   • 方案二：派发事件时添加自定义标记。如果场景中存在其他脚本派发的事件，需要单独区分自主触发的按钮点击，可以在创建事件时添加自定义属性：

     // 派发事件时添加标记
     const event = new Event('click');
     event.isManualTrigger = true;
     button1.dispatchEvent(event);
     
     // 全局监听器判断
     document.addEventListener('click', function(e) {
       if (e.isManualTrigger) {
         // 自主派发的按钮点击事件逻辑
       }
     })
     

内容的提问来源于stack exchange，提问作者Type-Style