JavaScript：Window事件、document事件与元素事件该如何选择？

• 派发Window事件
• 派发document事件
• 从元素派发事件

在下方示例中，这些方法实现的效果完全相同，那么选择其中一种而非其他的理由是什么？这是我在项目中需要做出的（经过简化的）选择场景。

示例代码 #

JavaScript 部分

function addWindowEvent(name,fromElem) {
        const event = new CustomEvent(name, { detail: fromElem.id});
        window.dispatchEvent(event);
}
function addDocumentEvent(name,fromElem) {
        const event = new CustomEvent(name, { detail: fromElem.id});
        document.dispatchEvent(event);
}
function addElementEvent(name,fromElem) {
        const event = new CustomEvent(name, { detail: fromElem.id});
        fromElem.dispatchEvent(event);
}
function showResult(e,n) {
        document.getElementById("div"+n).innerText = 'Event sent from: ' + e.detail;
}
window.addEventListener('myEvent', event => showResult(event,1));
document.addEventListener('myEvent', event => showResult(event,2));
document.getElementById('div3').addEventListener('myEvent', event => showResult(event,3));

HTML 部分

<button onclick="addWindowEvent('myEvent',div1)">
  Send a window event from the element underneath me
</button>
<div id=div1>No event yet</div>

<button  onclick="addDocumentEvent('myEvent',div2)">
  Send a document event from the element underneath me
</button>
<div id=div2>No event yet</div>

<button  onclick="addElementEvent('myEvent',div3)">
    Send an element event from the element underneath me
</button>
<div id=div3>No event yet</div>

选择不同方式的核心逻辑 #

1. 从元素派发事件

这是语义最贴合的方式——事件的触发源头就是目标元素，完全符合DOM事件模型的设计逻辑：事件因该元素的操作或状态变化产生。

• 便于精准控制：后续要做事件捕获、冒泡拦截，或者只让该元素的子节点监听事件时，扩展性更强。
• 减少冲突：事件只在元素及其DOM树范围内传播，不会无差别扩散到全局层级，降低全局事件命名冲突的概率。

2. 派发document事件

适合跨组件/模块的全局通知，但又不想把事件提升到window层级。比如多个独立组件需要监听某个全局状态变化，但希望事件传播范围比window更收敛，只在document及其子节点中传播，避免和window上的第三方脚本事件冲突。

3. 派发Window事件

完全的全局事件，仅适用于整个页面级别的通知场景，比如页面加载完成、路由切换这种影响整个应用的事件。缺点是window是所有脚本共享的顶级对象，事件命名重复的风险极高，容易和第三方脚本的全局事件冲突。

总结建议 #

• 事件仅和具体元素相关时，优先选元素派发，这是最合理的选择。
• 需要跨组件共享事件但不想完全全局化时，用document级别派发。
• 只有涉及整个应用的全局通知场景，再考虑window级别派发。

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