dispatchEvent 不触发 jQuery.on() 事件监听器

我有以下触发自定义命名事件的代码：

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显示问题。

默认情况下事件不会冒泡，因此创建事件时需要传递bubbles: true作为指示您希望事件冒泡的选项。您可以使用自定义事件要做到这一点。

您正在使用事件委托来注册第二个处理程序，该处理程序利用事件冒泡来工作。

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>