jQuery查找事件处理程序注册一个对象

我需要find哪些事件处理程序注册在一个对象上。

例如:

$("#el").click(function() {...}); $("#el").mouseover(function() {...}); 

$("#el")已经点击鼠标hover注册。

有没有一个函数来发现,并可能迭代事件处理程序?

如果通过正确的方法在jQuery对象上不可能,那么在普通的DOM对象上可能吗?

从jQuery 1.8开始,事件数据不再可以从“公共API”获取数据。 阅读这个jQuery博客文章 。 你现在应该用这个来代替:

 jQuery._data( elem, "events" ); 

elem应该是一个HTML元素,而不是一个jQuery对象或select器。

请注意,这是一个内部的“私人”结构,不应该修改。 仅用于debugging目的。

在旧版本的jQuery中,您可能必须使用以下旧方法:

 jQuery( elem ).data( "events" ); 

你可以这样做:

 $("#el").click(function(){ alert("click");}); $("#el").mouseover(function(){ alert("mouseover"); }); $.each($("#el").data("events"), function(i, e) { alert(i); }); //alerts 'click' then 'mouseover' 

如果你使用的是jQuery 1.4以上版本,这将会提醒绑定到它的事件和函数:

 $.each($("#el").data("events"), function(i, event) { alert(i); $.each(event, function(j, h) { alert(h.handler); }); }); //alerts: //'click' //'function (){ alert("click"); }' //'mouseover' //'function(){ alert("mouseover"); }' 

你可以在这里玩jsFiddle

对于jQuery 1.8+,这将不再工作,因为内部数据被放置在一个不同的对象。

最新的非官方(但在以前的版本,至less在1.7.2)现在这样做是 – $._data(element, "events")

下划线(“_”)是这里的区别。 在内部调用$.data(element, name, null, true) ,最后一个(第四个)参数是内部的(“pvt”)。

无耻的插件,但你可以使用findHandlerJS

要使用它,你只需要包含findHandlersJS (或者只是复制并粘贴到Chrome的控制台窗口的原始JavaScript代码 ),并指定事件types和jQuery的select你感兴趣的元素。

对于你的例子,你可以很快find你所做的事件处理程序

 findEventHandlers("click", "#el") findEventHandlers("mouseover", "#el") 

这是什么得到返回:

  • 元件
    事件处理程序注册的实际元素
  • 事件
    有关我们感兴趣的事件types的jquery事件处理程序的信息的数组(例如,点击,更改等)
    • 处理器
      通过右键单击并select显示函数定义,您可以看到实际的事件处理程序方法
    • select
      select器提供了委托事件。 直接事件将是空的。
    • 目标
      列出该事件处理程序所针对的元素。 例如,对于在文档对象中注册的委托事件处理程序,并且定位页面中的所有button,此属性将列出页面中的所有button。 你可以将它们hover在chrome中看到它们。

你可以在这里尝试

我使用eventbug插件为此目的的萤火虫。

我已经将两个解决scheme从@jps结合到一个函数中:

 jQuery.fn.getEvents = function() { if (typeof(jQuery._data) == 'function') { return jQuery._data(this.get(0), 'events') || {}; } else if (typeof(this.data) == 'function') { // jQuery version < 1.7.? return this.data('events') || {}; } return {}; }; 

但要小心,这个函数只能返回jQuery本身设置的事件。

从1.9开始,没有logging的方式来检索事件,除了使用Migrate插件来恢复旧的行为。 你可以像jps提到的那样使用_.data()方法,但这是一个内部方法。 所以只要做正确的事情,并使用Migrate插件,如果你需要这个function。

.data("events")上的jQuery文档.data("events")

在1.9之前,如果没有其他代码定义了名为“events”的数据元素,则.data(“events”)可用于检索jQuery未公开的内部事件数据结构。 1.9中删除了这个特例。 没有公共接口来检索这个内部数据结构,它仍然是未logging的。 然而,jQuery Migrate插件为依赖于它的代码恢复了这种行为。

在具有ECMAScript 5.1 / Array.prototype.map的现代浏览器中,您也可以使用

 jQuery._data(DOCUMENTELEMENT,'events')["EVENT_NAME"].map(function(elem){return elem.handler;}); 

在您的浏览器控制台中,这将打印处理程序的来源,逗号分隔。 用于浏览所有正在运行的特定事件。

事件可以使用

 jQuery(elem).data('events'); 

或者jQuery 1.8+:

 jQuery._data(elem, 'events'); 

注意:使用$('selector').live('event', handler)绑定$('selector').live('event', handler)可以使用以下命令获取:

 jQuery(document).data('events') 

我不得不说很多答案是有趣的,但是最近我遇到了一个类似的问题,通过使用DOM方法,解决scheme非常简单。 这是不同的,因为你不重复,而是直接瞄准你需要的事件,但下面我会给出一个更一般的答案。

我有一个连续的图像:

 <table> <td><tr><img class="folder" /></tr><tr>...</tr></td> </table> 

该图像附有一个点击事件处理程序:

 imageNode.click(function () { ... }); 

我的意图是扩大可点击面积的整个行,所以我第一次得到所有的图像和相关的行:

 tableNode.find("img.folder").each(function () { var tr; tr = $(this).closest("tr"); // <-- actual answer }); 

现在在实际的生产线上,我做了如下的事情,回答了原来的问题:

 tr.click(this.onclick); 

所以我直接从DOM元素获取事件处理程序,并将其放入jQuery的单击事件处理程序。 奇迹般有效。

现在,一般情况下。 在jQuery之前的老版本中,您可以通过Douglas Crockford将两个简单而强大的函数赋予给我们凡人的所有事件附加到一个对象上:

 function walkTheDOM(node, func) { func(node); node = node.firstChild; while (node) { walkTheDOM(node, func); node = node.nextSibling; } } function purgeEventHandlers(node) { walkTheDOM(node, function (n) { var f; for (f in n) { if (typeof n[f] === "function") { n[f] = null; } } }); } 

另一种方法是只使用jQuery来获取元素,然后通过实际的Javascript来获取和设置和使用事件处理程序。 例如:

 var oldEventHandler = $('#element')[0].onclick; // Remove event handler $('#element')[0].onclick = null; // Switch it back $('#element')[0].onclick = oldEventHandler; 

如果您使用chrome,请试用jquerydebugging器插件: https : //chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi?hl = zh_CN

我创build了一个自定义的jQueryselect器,用于检查jQuery的指定事件处理程序的caching以及使用本机方法添加它们的元素:

 (function($){ $.find.selectors[":"].event = function(el, pos, match) { var search = (function(str){ if (str.substring(0,2) === "on") {str = str.substring(2);} return str; })(String(match[3]).trim().toLowerCase()); if (search) { var events = $._data(el, "events"); return ((events && events.hasOwnProperty(search)) || el["on"+search]); } return false; }; })(jQuery); 

例:

 $(":event(click)") 

这将返回具有附加的点击处理程序的元素。