document.addEventListener 与 $(document).on答案

【问题标题】：document.addEventListener vs. $(document).ondocument.addEventListener 与 $(document).on
【发布时间】：2017-01-01 19:13:58
【问题描述】：

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

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

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

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

编辑：嗯，似乎对环境有一些误解。

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

【问题讨论】：

一个是 jQuery(less code)，另一个是核心 JavaScript。
[...]adding a listener to document doesn't work[...] 是什么意思。我这个jsfiddle 你可以看到它确实有效。
@BhojendraNepal 这怎么是骗子？
@BhojendraNepal 我看不出这是重复的。 OP声称addEventListener和jQuery的.on之间存在差异。您的链接问题是关于 addEventListener 与 on[eventname] 属性。
你去吧.... 使用 jQuery 或纯 JavaScript。

标签： javascript jquery typescript ecmascript-6

【解决方案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来捕捉它

【讨论】：

【解决方案2】：

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

请记住，您不能使用 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");

【讨论】：

您可以使用 vanilla JS 触发 jQuery 事件处理程序。看看这里jsfiddle.net/gx5xhhr1/2。所以说“如果用jQuery注册，只能用jQuery触发”是不正确的。
你是对的。写的有点不对。这就是我的not okay 示例的原因。我希望我的文字现在更清楚了。谢谢@Anton

【解决方案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 关键字有点棘手，因为它是上下文相关的

【讨论】：