如何绑定到jQuery中的所有自定义事件

Posted

技术标签:

【中文标题】如何绑定到jQuery中的所有自定义事件【英文标题】:How to bind to all custom events in jQuery 【发布时间】:2012-04-01 21:33:29 【问题描述】:

我知道不可能绑定到所有 DOM 事件,而且我知道您可以通过提供空格分隔的列表来绑定到多个事件。

但是是否可以绑定到所有自定义事件(最好通过通配符模式过滤,如“abc*”或名称空间)?

编辑: 为了澄清,我创建了一些自定义小部件来响应一些自定义事件。例如,它们都处理名为“stepReset”的事件并重置其内部模型。

在我写完这些之后,我意识到事件不会冒泡,所以调用$(body).trigger('stepReset') 基本上什么都不做。因此,我正在考虑在所有小部件的父元素上添加一个总括事件处理程序,以向下传播所有相关事件。

(我知道这不是一个优雅的解决方案,但我忘记使用具有公共类的处理程序标记元素,因此没有简单的方法来使用全选。)

【问题讨论】:

【参考方案1】:

关于您即将进行的编辑,您可以通过访问对象的数据来检索所有绑定事件:

var boundEvents = $.data(document, 'events');

从这里,您可以遍历生成的对象并检查您选择的通配符的每个属性,或者遍历该属性的数组元素并检查每个属性的namespace

例如,

$.each(boundEvents, function () 
    if (this.indexOf("*"))   // Checks each event name for an asterisk *
        alert(this);

    // alerts the namespace of the first handler bound to this event name
    alert(this[0].namespace); 
);

如果我理解正确,您可以遍历特殊事件对象以获取自定义事件列表(包括在 jQuery 源代码中指定的事件)。这是一个 ES5 示例,您需要自己适应旧版浏览器或使用 a polyfill 替换 Object.keys

var evts = Object.keys(jQuery.event.special).join(" ");
$("#myDiv").on(evts, function (e) 
    // your code here
);

【讨论】:

在绑定到通配符或特定命名空间方面,我猜他必须重载trigger()并将触发的事件与jQuery.event.special的属性手动进行比较? 知道了,但似乎自定义事件don't get added to jQuery.event.special(至少在 1.7.1 中):( @Matt:我认为您将触发与绑定混淆了。 jQuery.event.special 用于手动添加自定义事件处理程序,以后可以使用bindon 绑定。未定义的事件不能绑定到。 啊,在这种情况下,我认为我们对问题的解释不同;)。我认为 OP 希望能够做类似的事情; jsfiddle.net/E8ue2/1 我给你一个 +1 只是 关于你即将进行的编辑...哈哈:P

以上是关于如何绑定到jQuery中的所有自定义事件的主要内容,如果未能解决你的问题,请参考以下文章

jQuery实现获取绑定自定义事件元素的方法

由自定义事件到双向绑定

jQuery 的自定义事件

jQuery on() 方法 为选定已存在元素和未来元素绑定标准事件和自定义事件

Vue.js 绑定到名称中带有点的 DOM 自定义事件(如引导事件)

如何将自定义事件添加到 jQuery 插件模式中