document.addEventListener 与 $(document).on

我不知何故发现向文档添加事件侦听器的行为有点奇怪。虽然向 HTMLElements 添加侦听器工作正常，但向文档添加侦听器不起作用。但奇怪的是，使用 jQuery 就可以了。

那么有人可以解释一下，为什么这两个函数没有做完全相同的事情？

["customEvent1", "customEvent2"].forEach(
    (event: string) => {
        document.addEventListener(event, () => this.eventHandler());
    });

$(document).on("customEvent1 customEvent2", () => this.eventHandler());

编辑： 嗯，看来大家对环境有一些误解。

1. 该函数被一个类包围
2. 我正在使用 TypeScript/ES6
3. EventHandler 是一个类方法
4. 自定义事件的触发方式为$(document).trigger("customEvent1");

如果您使用 jQuery 不会创建本机事件$(document).trigger("customEvent2"); (jquery src/event/trigger.js https://github.com/jquery/jquery/blob/52e24471c89b80e6208b4987bb76994e64c1e489/src/event/trigger.js），它仅模拟本机事件处理。

因此，如果您使用注册事件处理程序document.addEventListener那么你就不能使用$(document).trigger(对于那些事件。

但是如果您使用本机代码创建并分派事件：

var event = new Event('customEvent1');
document.dispatchEvent(event);

然后你就可以用两者来捕捉它document.addEventListener和 jQuery 的.on