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

Posted 2023-02-23

【中文标题】使用名称中的点调度 CustomEvent 不会触发 jQuery.on() 事件侦听器

【英文标题】：Dispatching CustomEvent with dot in name do not trigger jQuery.on() event listener

【发布时间】：2016-10-03 17:35:06

【问题描述】：

我使用 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,console

【参考方案1】：

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

简短的回答是，jQuery 没有办法为此类事件安装处理程序。

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

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

【参考方案2】：

“正常”的 DOM 事件系统没有命名空间的概念。 window.addEventListener('test.namespace', ...) 实际上会监听名为 test.namespace 的事件，这就是您使用 new CustomEvent('test.namespace', ...) 创建的事件。

Event namespaces是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>