dispatchEvent 没有触发 jQuery.on() 事件监听器答案

【问题标题】：dispatchEvent not triggering jQuery.on() event listenerdispatchEvent 没有触发 jQuery.on() 事件监听器
【发布时间】：2014-12-12 23:04:52
【问题描述】：

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

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

【问题讨论】：

当然，如果你已经在使用 jQuery，你可以使用$(this).trigger("custom_event")，但我猜你有一个原因使用上面的直接 DOM 代码（也许是一个非 jQuery 库你想兼容 jQuery 代码使用它？）。
是的，就是这个原因:)

标签： javascript jquery

【解决方案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>

【讨论】：