Document.addEventListener vs. $ (document) .on

Question

I somehow found a bit strange behavior of adding eventlisteners for a document. When adding listeners to HTMLElements, it works fine; adding a listener to the document does not work. But it is strange that using jQuery makes it work.

So can someone explain why these two functions do not do the same?

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

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

EDIT: Well, these are the seams that there are some misunderstandings regarding the environment.

• Function surrounded by class
• I am using TypeScript / ES6
• EventHandler - class method
• custom event is fired with $(document).trigger("customEvent1");

Answer 1

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

, . , descructuring (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);

Hide result

, , javascript 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");

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 ,