Are JQuery events usables with Dom addEventListener?

Question

I'm using Bootstrap4 alpha in my project, and for some investigations purposes, i'm trying to catch a JQuery event using DOM addEventListener().

The event is fired using the JQuery $("#mypanel").trigger("shown.bs.collapse") function by bootstrap in it's collapse component.

If i try to catch it using the JQuery $("#mypanel").on("shown.bs.collapse", ... ) function, everything works just fine. But if i use $("#mypanel").get(0).addEventListener("shown.bs.collapse", ... ) on the corresponding DOM elements, the event is not "catched"

Are JQuery event system and standard DOM event system are NOT compatibles ?

One thing that make me think they are actualy incompatible, is that if i use the chrome monitorEvents() function to track the "shown.bs.collapse" event, it simply do not appear.

Any feedback about that is welcome !!

Thanks a lot !

Clément

Answer 1

No, you can't use jQuery custom events with the regular JavaScript event engine.

Think of the jQuery event system as an extension of the standard DOM event system. jQuery can know about all of the events that the browser raises, because it can create actual event handlers for it. It can also have its own custom events because when you call .trigger('your.custom.event') jQuery can first check for its own stored event handlers for that (custom) event, before raising an actual browser event.