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

Question

我使用了 jQuery 版本 2.2.4 并尝试捕获事件 - 没有运气。有什么办法可以解决问题吗？

此代码有效：

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、控制台

Answer 1

“普通”DOM 事件系统没有命名空间的概念。 window.addEventListener('test.namespace', ...) 实际上将监听名为 test.namespace 的事件，这是您使用 <代码>new CustomEvent('test.namespace', ...).

事件命名空间是 jQuery 中的一个概念：

事件名称可以通过事件命名空间来限定，从而简化删除或触发事件的过程。例如，"click.myPlugin.simple" 定义了此特定点击事件的 myPlugin 和 simple 命名空间。通过该字符串附加的点击事件处理程序可以使用 .off("click.myPlugin") 或 .off("click.simple") 删除，而不会干扰其他点击处理程序附加到元素。

这里重要的是命名空间不是事件名称的一部分。这就是为什么 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>

Answer 2

前面的答案并没有真正解决如何为来自第三方（非 jQuery）库并且事件名称中有一个点的自定义事件注册处理程序的问题。假设该事件是 foo.bar。

简而言之，jQuery 没有办法为此类事件安装处理程序。

$(window).on( 'foo.bar' ) 将为事件 foo 安装一个处理程序。

似乎没有任何方法可以转义名称中的点，或者强制 jQuery 为名为 foo.bar 的事件安装处理程序。