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>

dispatchEvent不会触发jQuery.on（）事件侦听器

1 个答案: