document.addEventListener vs. $(document).on
我不知何故发现了在文档中添加事件侦听器的一些奇怪行为。虽然将侦听器添加到HTMLElements很好，但将侦听器添加到文档中却不起作用。但奇怪的是，使用jQuery使其工作。
那么有人能解释一下，为什么这两个函数不做完全相同的事情呢？
["customEvent1", "customEvent2"].forEach(
(event: string) => {
document.addEventListener(event, () => this.eventHandler());
});
$(document).on("customEvent1 customEvent2", () => this.eventHandler());编辑:嗯，它的接缝，有一些误解的环境。
- 函数被一个类包围。
- 我用的是打字本/ES6
- EventHandler是一个类方法。
- 使用
$(document).trigger("customEvent1")触发自定义事件；
回答 3
Stack Overflow用户
发布于 2016-08-25 11:35:20
如果使用jQuery (jquery /Event.js)，则不会创建本机事件，它只模拟本机事件处理。
因此，如果使用document.addEventListener注册事件处理程序，则不能对这些事件使用$(document).trigger(。
但是，如果您使用本机代码创建和分派一个事件：
var event = new Event('customEvent1');
document.dispatchEvent(event);然后您可以同时使用document.addEventListener和jQuery的.on捕获它。
Stack Overflow用户
发布于 2016-08-25 11:29:49
据我所知，你的箭头功能是错误的。您可以这样做，因为(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);
请记住，您不能触发使用vanilla注册的事件，也不能使用jQuery触发事件。jQuery只创建event-like回调，而不是真正的事件。所以你必须使用trigger。
// ok
document.addEventListener('customEvent1', eventHandler);
var event1 = new Event('customEvent1');
document.dispatchEvent(event1);
// ok
$(document).on("customEvent2", eventHandler);
$(document).trigger("customEvent2");
// ok
$(document).on("customEvent3", eventHandler);
var event3 = new Event('customEvent3');
document.dispatchEvent(event3);
// not okay
document.addEventListener('customEvent4', eventHandler);
$(document).trigger("customEvent4");Stack Overflow用户
发布于 2016-08-25 11:35:08
问题不在于您附加事件处理程序的方式。addEventListener和on方法都很好。但是，问题可能出现在forEach或lambda中，后者将this的范围更改为您不希望看到的内容。要确保引用正确的对象，请更改代码如下：
var self = this;
["customEvent1", "customEvent2"].forEach(
(event: string) => {
document.addEventListener(event, () => self.eventHandler());
});
$(document).on("customEvent1 customEvent2", () => self.eventHandler());this关键字有点棘手，因为它是上下文的。
https://stackoverflow.com/questions/39143849
复制相似问题
腾讯云开发者
