document.addEventListener versus $().on

Question

document.addEventListener versus $().on

Recently, I came across an odd behavior while trying to add event listeners to the document. Strangely, when adding listeners to HTMLElements, everything worked smoothly, but for some reason, adding a listener to the document did not have any effect. However, strangely enough, using jQuery made it work perfectly.

I am puzzled as to why these two functions are not functioning in the same way. Can anyone shed light on this discrepancy?

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

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

EDIT: It appears that there may be some confusion about the setup:

The function is contained within a class
I am utilizing TypeScript/ES6
The EventHandler is a class method
The custom event is triggered with
```
$(document).trigger("customEvent1")
```
;

javascript jquery typescript ecmascript-6

Answer 1

Answer №1

When triggering a custom event in jQuery with

$(document).trigger("customEvent2");

, the library does not create a native event, but rather emulates the handling of it as explained in the source code (jquery src/event/trigger.js).

If you have registered an event handler using document.addEventListener, then trying to trigger those events with $(document).trigger( will not work.

However, if you manually create and dispatch an event using native JavaScript like this:

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

You will be able to catch that event using both document.addEventListener and jQuery's .on method.

Answer 2

When triggering a custom event in jQuery with

$(document).trigger("customEvent2");

, the library does not create a native event, but rather emulates the handling of it as explained in the source code (jquery src/event/trigger.js).

If you have registered an event handler using document.addEventListener, then trying to trigger those events with $(document).trigger( will not work.

However, if you manually create and dispatch an event using native JavaScript like this:

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

You will be able to catch that event using both document.addEventListener and jQuery's .on method.

Answer 3

Answer №2

It seems like there is an issue with your arrow function in the code. You could simplify it by passing in the handler directly instead of using unnecessary syntax. Additionally, keep in mind that jQuery can only create event-like callbacks and not real events when triggering events registered with vanilla js.

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

Remember that when triggering events registered with vanilla js using jQuery, you will need to use the trigger method as shown below:

// 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 4

It seems like there is an issue with your arrow function in the code. You could simplify it by passing in the handler directly instead of using unnecessary syntax. Additionally, keep in mind that jQuery can only create event-like callbacks and not real events when triggering events registered with vanilla js.

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

Remember that when triggering events registered with vanilla js using jQuery, you will need to use the trigger method as shown below:

// 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 5

Answer №3

The issue does not lie in how you are adding event handlers. Both the use of addEventListener and the on method are correct. However, the problem may be related to either the forEach loop or the arrow functions that can alter the context of this. To make sure you are referencing the intended object, try updating your code as follows:

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

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

The behavior of the this keyword can be a bit complex since it is bound by context.

Answer 6

The issue does not lie in how you are adding event handlers. Both the use of addEventListener and the on method are correct. However, the problem may be related to either the forEach loop or the arrow functions that can alter the context of this. To make sure you are referencing the intended object, try updating your code as follows:

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

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

The behavior of the this keyword can be a bit complex since it is bound by context.

document.addEventListener versus $().on

Answer №1

Answer №2

Answer №3

Similar questions

The CSS classes for the dropzonejs are not being properly updated for editing purposes

Prevent repeating the same table header multiple times when generated dynamically with jQuery

Tips for fetching individual item information from Firebase real-time database using Angular 9 and displaying it in an HTML format

Difficulty paginating jqgrid when using an array as the data source

Activate tooltip by clicking outside of the dropdown menu

InvalidAction: The function forEach cannot be applied to "res"

Is it more effective to utilize a filter or request fresh data when filling in a form's drop-down choices?

Tips for customizing the font color in Material UI Typography

Tips for handling an empty jQuery selection

Show additional information when a row in the Bootstrap Vue table is clicked

tips for preventing issues when the data array is empty

Can you explain the significance of 1e9 in the context of NodeJS hrtime?

Visual Studio Code's Intellisense is capable of detecting overloaded functions in JavaScript

Verifying the presence of Angular loading Google (or other) APIs, or tips on preventing share buttons from disappearing

Exploring SVGO CLI: A guide to inspecting SVGs across various directories

Ways to ensure the text on my website scrolls into view as the user navig

Is there a way to automatically recalculate the "Total Price" when the input values are adjusted?

Generating unique names based on input from users

Guide to seamlessly incorporate a HTML template into your Angular 7 project

JavaScript | Calculating total and separate scores by moving one div onto another div