我可以使用jQuery找到绑定在元素上的事件吗?


355

我在此链接上绑定了两个事件处理程序:

<a href='#' id='elm'>Show Alert</a>

JavaScript:

$(function()
{
  $('#elm').click(_f);
  $('#elm').mouseover(_m);
});

function _f(){alert('clicked');}
function _m(){alert('mouse over');}

有什么方法可以获取绑定在元素上的所有事件的列表,在本例中是with的元素id="elm"

Answers:


517

在现代版本的jQuery中,您将使用该$._data方法查找jQuery附加到相关元素的任何事件。注意,这是仅供内部使用的方法:

// Bind up a couple of event handlers
$("#foo").on({
    click: function(){ alert("Hello") },
    mouseout: function(){ alert("World") }
});

// Lookup events for this particular Element
$._data( $("#foo")[0], "events" );

来自的结果$._data将是一个包含我们设置的两个事件的对象(如下图所示,该mouseout属性已展开):

$ ._的控制台输出

然后,在Chrome中,您可以右键单击处理程序函数,然后单击“查看函数定义”,以向您显示在代码中定义的确切位置。


59
这仅适用于通过jQuery帮助器绑定的元素。
亚历克斯·西米尼安

3
@jammypeach我正在尝试您的解决方案,但仍然为选择器返回未定义的返回值。我用$('#elem')。bind('click',function(){}); 如果那会有所作为。
Marcus 2012年

6
@marcus ahhh,我错过了一些东西,对不起:)$._data(element[0], ‘events’);
totallyNotLizards 2012年

16
这些天,必须使用:$ ._ data($('#foo')[0]).events
Donald Taylor

5
$._data()由JQuery内部使用。$.data()是用户的公共方法。并且$.data(element, 'events')工作正常。
slideshowp2

73

一般情况:

  • 击中 F12打开开发工具
  • 点击 Sources标签
  • 在右侧,向下滚动到 Event Listener Breakpoints,然后展开树
  • 单击您想听的事件。
  • 与目标元素进行交互,如果它们触发,您将在调试器中得到一个断点

同样,您可以:

  • 右键单击目标元素 ->选择“Inspect element
  • 向下滚动到开发框架的右侧,底部是“event listeners ”。
  • 展开树以查看将哪些事件附加到元素。不知道这是否适用于通过冒泡处理的事件(我猜不是)

3
我同意这是首选方法,并且是通用解决方案,而不是依赖jQuery,后者可能会或可能不会。
deadbabykitten

3
@dead umm ...这个问题专门针对jQuery,并在示例附件中使用jQuery-答案应仅在jQuery(?)上下文中有效
Code Jockey

3
理解其他情况下的答案也很有帮助。仅仅因为有人提出一个特定的问题并不意味着他们将得到的受限答案就是最好的答案。尤其是使用jQuery,人们倾向于将其作为拐杖。了解底层架构很重要。这个答案表明jQuery甚至不是必需的。问题和示例太含糊,无法知道用法,因此有待解释什么可以被认为是有效的答案。
deadbabykitten

12

我添加这个是为了后代。有一种更简单的方法,无需编写更多的JS。使用出色的Firebug萤火虫插件

  1. 右键单击该元素,然后选择“使用Firebug检查元素”
  2. 在侧边栏面板(如屏幕截图所示)中,使用微小的>箭头导航至事件标签。
  3. 事件选项卡显示事件和每个事件的相应功能
  4. 它旁边的文本显示功能位置

在此处输入图片说明


1
IE dev工具中也提供此功能。
devlin康乃馨

9

现在,您可以使用javascript函数getEventListeners()来简单地获取绑定到对象的事件侦听器的列表。

例如,在开发工具控制台中键入以下内容:

// Get all event listners bound to the document object
getEventListeners(document);

4
我认为这不是本机函数,需要以下脚本/依赖项:github.com/colxi/getEventListeners应该将其添加到答案中,否则会引起误解。但是,感谢您让我使用“插件”;看起来不错。:)
Dennis98 '19

6

jQuery的审计插件插件应该让你通过正常的Chrome浏览器开发工具做到这一点。它不是完美的,但是它应该让您看到绑定到元素/事件的实际处理程序,而不仅仅是通用jQuery处理程序。


3

尽管这并非完全针对jQuery选择器/对象,但在FireFox Quantum 58.x中,您可以使用Dev工具在元素上找到事件处理程序:

  1. 右键单击元素
  2. 在上下文菜单中,单击“检查元素”
  3. 如果元素旁边有一个“ ev”图标(黄色框),请单击“ ev”图标
  4. 显示该元素和事件处理程序的所有事件

FF Quantum开发工具


1
很棒的答案,尤其是屏幕截图使它变得更加容易。谢谢您的努力!
bizi

2

我用了类似的东西if($ ._ data($(“” a.wine-item-link“)[0])。events == null){...做一些事情,再次将它们的事件处理程序再次绑定}检查如果我的元素绑定到任何事件。如果您已从该元素取消附加所有事件处理程序,它将仍然显示未定义(空)。这就是为什么我在if表达式中对此进行评估的原因。


2

请注意,事件可能会附加到文档本身,而不是相关元素。在这种情况下,您将需要使用:

$._data( $(document)[0], "events" );

并使用正确的选择器查找事件:

在此处输入图片说明

然后查看处理程序 > [[FunctionLocation]]

在此处输入图片说明


0

当我像这样将一个复杂的DOM查询传递给$ ._ data时:$._data($('#outerWrap .innerWrap ul li:last a'), 'events')它在浏览器控制台中抛出undefined。

因此,我必须在父div上使用$ ._ data:$._data($('#outerWrap')[0], 'events')以查看a标签的事件。这是相同的JSFiddle:http : //jsfiddle.net/giri_jeedigunta/MLcpT/4/


3
原因是您要从中委派事件$('#outerWrap')。实际上,事件绑定到该元素,而不是单个锚。
Scottux 2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.