dispatchEvent не вызывает jQuery.on() событие слушатель

Question

У меня есть следующий код, который запускает пользовательское событие с именем:

elem.addEventListener('click', function (event) 
{ 
    event.preventDefault(); 

    // Do some processing stuff 

    var event = new Event('custom_event'); 
    this.dispatchEvent(event); 
}); 

Если я пытаюсь поймать пользовательское событие с jQuery.on() он работает, но только когда я не использую фильтр селектора потомков.

Так это работает:

$('selector').on('custom_event', function() { // works }); 

Но это не делает:

$(document).on('custom_event', 'selector', function() { // doesn't work }); 

Может кто-нибудь пролить некоторый свет на то, почему это? Вот Fiddle, показывающий проблему.

Answer 1

По умолчанию событие не пузырится, поэтому при создании события вам необходимо передать bubbles: true в качестве опции, чтобы указать, что вы хотите, чтобы событие было пузырьковым. Вы можете использовать CustomEvent для этого.

Вы используете делегирование событий для регистрации второго обработчика, который использует работу с пузырьками событий.

document.querySelectorAll('.button')[0].addEventListener('click', function(e) { 
 
    var event = new CustomEvent('custom_event', { 
 
    bubbles: true 
 
    }); 
 
    this.dispatchEvent(event); 
 
}); 
 

 
$(document).on('custom_event', '.button', function() { 
 
    alert('Custom event captured [selector filter]'); 
 
}); 
 

 
$('.button').on('custom_event', function() { 
 
    alert('Custom event captured'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button class="button">Click Me</button>