4

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 actually 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.

Clément

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Clement
  • 3,860
  • 4
  • 24
  • 36
  • `shown.bs.collapse` is a custom event provided by Bootstrap plugin, they are not native events thus `addEventListener()` doesn't supports that – Satpal Dec 04 '15 at 13:28
  • exactly `shown.bs.collapse` is a JQuery event fired by Bootstrap itself – Clement Dec 04 '15 at 13:29
  • i guess DOM has it's implementation of events and jQuery `methods and events` only available for jQuery objects only. – Jai Dec 04 '15 at 13:30
  • That's what my experiments tends to say ... But it seams very weird to me that JQuery and traditional DOM event system are not compatible ... – Clement Dec 04 '15 at 13:31

1 Answers1

6

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.

Anthony Grist
  • 38,173
  • 8
  • 62
  • 76
  • Okay, so there is actually two events system that lives together, you confirm that ? – Clement Dec 04 '15 at 13:34
  • @Clement It's been a while since I've looked at it (or used jQuery, as it happens), but from what I remember... Yes, jQuery handles custom events without the browser('s event engine) knowing anything about it. I might go dig through the source code if I have time later, and confirm it. – Anthony Grist Dec 04 '15 at 13:37