Is there a way to set up an event listener, so it captures an event fired by jQuery? I want to use only plain (vanilla) JavaScript to listen to the event.

I have set up the following example:

(function($) {

    $(document).on('sent_jquery_rec_jquery', function () {
        console.log('sent_jquery_rec_jquery');
    });

    $(document).on('sent_vanilla_rec_jquery', function () {
        console.log('sent_vanilla_rec_jquery');
    });

    document.addEventListener('sent_vanilla_rec_vanilla', function () {
        console.log('sent_vanilla_rec_vanilla');
    });

    document.addEventListener('sent_jquery_rec_vanilla', function () {
        console.log('sent_jquery_rec_vanilla');
    });

    document.dispatchEvent(new Event("sent_vanilla_rec_vanilla"));
    document.dispatchEvent(new Event("sent_vanilla_rec_jquery"));

    $(document).trigger('sent_jquery_rec_jquery');
    $(document).trigger('sent_jquery_rec_vanilla');

}(jQuery));

Three events which are received and logged are:

• sent_vanilla_rec_vanilla
• sent_vanilla_rec_jquery
• sent_jquery_rec_jquery

When the event is sent via $(document).trigger, the event listener set up with document.addEventListener does not kick in. What's the reason for that, and how can I make it work?

Is there a way to set up an event listener, so it captures an event fired by jQuery? I want to use only plain (vanilla) JavaScript to listen to the event.

I have set up the following example:

(function($) {

    $(document).on('sent_jquery_rec_jquery', function () {
        console.log('sent_jquery_rec_jquery');
    });

    $(document).on('sent_vanilla_rec_jquery', function () {
        console.log('sent_vanilla_rec_jquery');
    });

    document.addEventListener('sent_vanilla_rec_vanilla', function () {
        console.log('sent_vanilla_rec_vanilla');
    });

    document.addEventListener('sent_jquery_rec_vanilla', function () {
        console.log('sent_jquery_rec_vanilla');
    });

    document.dispatchEvent(new Event("sent_vanilla_rec_vanilla"));
    document.dispatchEvent(new Event("sent_vanilla_rec_jquery"));

    $(document).trigger('sent_jquery_rec_jquery');
    $(document).trigger('sent_jquery_rec_vanilla');

}(jQuery));

Three events which are received and logged are:

• sent_vanilla_rec_vanilla
• sent_vanilla_rec_jquery
• sent_jquery_rec_jquery

When the event is sent via $(document).trigger, the event listener set up with document.addEventListener does not kick in. What's the reason for that, and how can I make it work?

• javascript
• jquery
• addeventlistener
• jquery-events

Share Improve this question Follow edited Jan 11, 2022 at 7:37 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 10, 2015 at 13:04 Pavel S.Pavel S. 12.4k1919 gold badges7777 silver badges113113 bronze badges 2

• Does it make a difference if you addEventListener after the triggers are registered? – Chad McGrath Commented Sep 10, 2015 at 13:18
• 2 May this be related to this? stackoverflow./questions/18823872/… – Danilo Commented Sep 10, 2015 at 14:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

JQuery apparently uses a custom event system, so you can't listen to jQuery events with a regular event listener. The aforementioned ticket mentions IE <9 as the culprit here, maybe jQuery 3 or 4 could make the switch.