javascript - 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 不会创建 native 事件，它只会模拟 native 事件处理。

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

但是如果您使用 native 代码创建和发送事件:

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

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