Question

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

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

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

$(document).on("customEvent1 customEvent2", () => this.eventHandler());

编辑：那么它就会对环境产生一些误解。

该功能由类
我正在使用TypeScript / ES6
EventHandler是一种类方法
自定义事件由$(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.addEventListener和jQuery的.on

来捕获它

Answer 2

据我所知，你的箭头功能是错误的。你可以这样做，因为(event: string)的解构在这里是错误的。由于() => eventHandler()有点多余，您可以传入handler。

＆＃13;

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);

＆＃13;

请记住，您不能使用jQuery触发使用vanilla js注册的事件。 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");

Answer 3

问题不在于您附加事件处理程序的方式。 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关键字有点棘手，因为它是上下文

document.addEventListener与$（document）.on

3 个答案: