document.addEventListener 与 $(document).on

Question

我不知何故发现将事件侦听器添加到文档的行为有点奇怪。虽然向 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")；

Answer 1

如果您使用$(document).trigger("customEvent2");( jquery src/event/trigger.js )，jQuery 不会创建本机事件，它只会模拟本机事件处理。

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

但是，如果您使用本机代码创建和调度事件：

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

然后你可以用document.addEventListenerjQuery 和 jQuery来捕获它.on