document.addEventListener vs. $(document).on

document.addEventListener vs. $(document).on

本文关键字：document on addEventListener vs      更新时间：2023-09-26

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

那么有人能解释一下，为什么这两个函数不做完全相同的事情吗?

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

编辑:看来人们对环境有一些误解。

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

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

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

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

var event = new Event('customEvent1');
document.dispatchEvent(event);
然后你可以用document.addEventListener和jQuery的.on来捕捉它

据我所知你的箭头函数是错误的。你可以这样做，因为(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);

请记住，你不能触发事件，注册与香草js，与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");

问题不在于您附加事件处理程序的方式。addEventListener和on方法都可以。然而，问题可能是在forEach或在lambdas中，它将this的范围更改为您不期望的东西。要确保引用了正确的对象，请像这样更改代码:

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

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

相关文章：