javascript - 使用 "this"或 "window"调度自定义事件？

Question

当我创建一个调度自定义事件的 Web 组件(特别是使用 lit/lit-element)时，我可以:

从窗口调度事件:

const evt = new CustomEvent("my-custom-event", {detail: "some-data"});
window.dispatchEvent(evt);

或者从 Web 组件本身调度事件 (this):

const evt = new CustomEvent("my-custom-event", {detail: "some-data"});
this.dispatchEvent(evt);

是否有理由让我想要做其中一个而不是另一个？

Answer 1

可以使用窗口作为事件调度程序来调度自定义事件，并添加处理它们的处理程序。

window.addEventListener("xyz", event => console.log(event.detail));

event = new CustomEvent("xyz", {
  detail: {
    action: "didInitialize",
    payload: 3
  }
});

window.dispatchEvent(event);

输出:

{action: 'didInitialize', payload: 3}

事件具有timeStamp和所有常见的事件属性。