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

Question

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

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

JavaScript的:

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

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

有没有办法得到一个元素绑定的所有事件的列表,在这种情况下元素与id="elm"？

Answer 1

在现代版本的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中,您可以右键单击处理程序函数并单击"查看函数定义"以显示代码中定义它的确切位置.

Answer 2

一般情况:

• 点击F12打开Dev Tools
• 单击Sources选项卡
• 在右侧,向下滚动Event Listener Breakpoints并展开树
• 单击要收听的事件.
• 与目标元素交互,如果它们触发,您将在调试器中获得一个断点

同样,您可以:

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

Answer 3

我正在为后代添加这个; 有一种更简单的方法,不涉及编写更多的JS.使用惊人的firebug插件for firefox,

1. 右键单击元素并选择"使用Firebug检查元素"
2. 在侧边栏面板中(如屏幕截图所示),使用tiny>箭头导航到events选项卡
3. "事件"选项卡显示每个事件的事件和相应的功能
4. 它旁边的文字显示了功能位置

Answer 4

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

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

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

Answer 5

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

Answer 6

虽然这并不完全特定于 jQuery 选择器/对象，但在 FireFox Quantum 58.x 中，您可以使用开发工具在元素上找到事件处理程序：

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

Answer 7

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

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

并找到具有正确选择器的事件：

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