document.addEventListener与$（document）.on

我以某种方式发现了将eventlisteners添加到文档中的一些奇怪的行为。 在向HTMLElements添加侦听器时，可以很好地向文档添加侦听器不起作用。 但奇怪的是，使用jQuery使其工作。

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

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

编辑：嗯，它有关于环境的一些误解。

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

Answer 1

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

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

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

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

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

Answer 2

据我所知，你的箭头function是错误的。 你可以这样做，因为(event: string)是错误的。 因为() => eventHandler()有点多余，你可以传入handler 。

 function eventHandler() { console.log("custom event"); } ["customEvent1", "customEvent2"].forEach( event => document.addEventListener(event, eventHandler) ); var event1 = new Event('customEvent1'); document.dispatchEvent(event1); var event2 = new Event('customEvent2'); document.dispatchEvent(event2); 

Answer 3

问题不在于您附加事件处理程序的方式。 addEventListener和on方法都很好。 但问题可能在forEach或lambdas中，这会将其范围更改为您不期望的范围。 为确保您引用正确的对象，请更改以下代码：

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

this关键字有点棘手，因为它是上下文的