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

Dispatching CustomEvent with dot in name do not trigger jQuery.on() event listener(调度名称中带有点的CustomEvent不会触发jQuery.on()事件侦听器)

问题描述

我使用了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

推荐答案

"普通"DOM事件系统没有名称空间的概念。window.addEventListener('test.namespace', ...)将直接侦听名为test.namespace的事件，这是您使用new CustomEvent('test.namespace', ...)创建的事件。

Event namespaces是jQuery中的一个概念：

事件名称可以由简化删除或触发事件的事件命名空间限定。例如，"click.myPlugin.simple"为这个特定的Click事件定义了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>

这篇关于调度名称中带有点的CustomEvent不会触发jQuery.on()事件侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！