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?
