javascript - 调度名称中带有点的 CustomEvent 不会触发 jQuery.on() 事件监听器

Question

我使用了 jQuery 版本 2.2.4 并 try catch 事件 - 没有成功。有什么办法可以解决问题吗？

此代码有效:

window.addEventListener('test.namespace', e => console.log('CustomEvent with namespace captured by vanilla'));

这不起作用:

$(window).on('test.namespace', e => console.log('CustomEvent with namespace captured by jQuery'));

const event = new CustomEvent('test.namespace', {
  bubbles: true,
  detail: 123
});
window.dispatchEvent(event);

http://jsbin.com/tecupavuji/edit?html,js,console

Answer 1

“普通”DOM 事件系统没有命名空间的概念。 window.addEventListener('test.namespace', ...)字面上会监听一个名为 test.namespace 的事件，这就是您使用 new CustomEvent('test.namespace', ...) 创建的内容.

Event namespaces是jQuery中的一个概念:

An event name can be qualified by event namespaces that simplify removing or triggering the event. For example, "click.myPlugin.simple" defines both the myPlugin and simple namespaces for this particular click event. A click event handler attached via that string could be removed with .off("click.myPlugin") or .off("click.simple") without disturbing other click handlers attached to the elements.

这里重要的是命名空间不是事件名称的一部分。这就是为什么 new CustomEvent('test.namespace', ...)不起作用，但是 new CustomEvent('test', ...)会的。

如果你想触发特定命名空间的事件，你必须为此使用 jQuery:

$(window).trigger('test.namespace', {detail: 123});

$(window).on('test.namespace', e => console.log('CustomEvent with namespace captured by jQuery'));

$(window).trigger('test.namespace', {detail: 123});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>