document.addEventListener與$（document）.on

Question

我以某種方式發現了將eventlisteners添加到文檔中的一些奇怪行為。 在向HTMLElements添加偵聽器時，可以正常地向文檔添加偵聽器不起作用。 但奇怪的是，使用jQuery使它工作。

那么有人可以解釋一下，為什么這兩個函數沒有做同樣的事情呢？

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

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

編輯：那么它對環境有一些誤解。

1. 該功能由一個類包圍
2. 我正在使用TypeScript / ES6
3. EventHandler是一個類方法
4. 自定義事件由$(document).trigger("customEvent1")觸發;

Answer 1

如果使用$(document).trigger("customEvent2"); jQuery不會創建本機事件$(document).trigger("customEvent2"); （ jquery src / event / trigger.js ），它只模擬本機事件處理。

因此，如果您使用document.addEventListener注冊事件處理程序，那么您不能使用$(document).trigger(對於那些事件。

但是如果使用本機代碼創建和分派事件：

var event = new Event('customEvent1');
document.dispatchEvent(event);

然后你可以用document.addEventListener和jQuery的.on來捕獲它

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

Answer 3

問題不在於您附加事件處理程序的方式。 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關鍵字有點棘手，因為它是上下文的