我发现在文档中添加事件监听器的行为有点奇怪。虽然向HTMLElements添加侦听器可以正常工作,但向文档添加侦听器不起作用。但奇怪的是,使用jQuery可以使它工作。
那么有人能解释一下,为什么这两个函数不做完全相同的事情吗?
["customEvent1", "customEvent2"].forEach(
(event: string) => {
document.addEventListener(event, () => this.eventHandler());
});
$(document).on("customEvent1 customEvent2", () => this.eventHandler());
编辑:看来人们对环境有一些误解。
- 函数被一个类 包围
- 我正在使用TypeScript/ES6
- eventandler是一个类方法
- 自定义事件由
$(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
关键字有点棘手,因为它是上下文