In my (javascript, jQuery) code, I use two ways of firing events

jQuery('body').trigger('crazy-trigger-event');
jQuery("body").get(0).dispatchEvent(new CustomEvent("crazy-dispatch-event"));

In the snippet here:

/

I have registered for custom events using both jQuery .on() and the DOM .addEventListener() methods.

Then I fire the events using both jQuery .trigger() and DOM .dispatchEvent() methods.

It seems like the listeners registered using .on() receive events fired both ways.

But the listeners registered with .addEventListener() only receive events fired using .dispatchEvent().

My use case is that I have a mix of legacy code and jQuery code, and it seems like it's safest to use .dispatchEvent() so that it's patible with both.

So is there some change to the code I can make so that listeners registered with .addEventListener() can recieve events from .trigger() ?

In my (javascript, jQuery) code, I use two ways of firing events

jQuery('body').trigger('crazy-trigger-event');
jQuery("body").get(0).dispatchEvent(new CustomEvent("crazy-dispatch-event"));

In the snippet here:

http://jsfiddle/jts9jhbt/3/

I have registered for custom events using both jQuery .on() and the DOM .addEventListener() methods.

Then I fire the events using both jQuery .trigger() and DOM .dispatchEvent() methods.

It seems like the listeners registered using .on() receive events fired both ways.

But the listeners registered with .addEventListener() only receive events fired using .dispatchEvent().

My use case is that I have a mix of legacy code and jQuery code, and it seems like it's safest to use .dispatchEvent() so that it's patible with both.

So is there some change to the code I can make so that listeners registered with .addEventListener() can recieve events from .trigger() ?

• javascript
• jquery
• events

Share Follow asked Aug 12, 2014 at 4:28 user3931014user3931014 14711 silver badge66 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 12

Simple Answer

No, you can't.

Explanation

The main reason is that jQuery needs to work across multiple browsers and ...

"[...] jQuery's event system is a layer on top of the DOM event system."

Eventhough there are exceptions, there is no efficient way for jQuery to know which events are supported by the browser currently due to the lack of a getEventListeners method. The developers think that the creation of a solution

"[...] isn't possible to do without breaking existing code or causing performance issues."

If that sounds like a challenge to anybody, you are free to prove them wrong by posting your solution.

---

The detailed explanation can be found in Dave Methvin's answers to jQuery's issue #2476.

I needed to click on an event that scrolls a navbar on mobile and this worked for me:

 let targetElement = document.querySelector(".className");
 let clickEvent = new Event('click');
 targetElement.dispatchEvent(clickEvent);