374

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

<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"？

4

9 回答 9

536

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

于 2010-01-05T19:48:01.553 回答
81

一般情况：

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

同样，您可以：

  • 右键单击目标元素->选择“ Inspect element”
  • 在开发框架的右侧向下滚动，底部是“ event listeners”。
  • 展开树以查看附加到元素的事件。不确定这是否适用于通过冒泡处理的事件（我猜不是）
于 2015-02-09T18:11:13.210 回答
12

我为后代添加了这个；有一种更简单的方法，不需要编写更多的 JS。为 firefox使用惊人的 firebug 插件，

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

在此处输入图像描述

于 2016-03-22T17:03:06.243 回答
12

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

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

// Get all event listners bound to the document object
getEventListeners(document);
于 2018-07-12T17:23:56.313 回答
6

jQuery Audit 插件插件应该可以让你通过普通的 Chrome 开发工具来做到这一点。它并不完美，但它应该让您看到绑定到元素/事件的实际处理程序，而不仅仅是通用 jQuery 处理程序。

于 2014-03-26T14:08:22.980 回答
4

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

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

并使用正确的选择器找到事件：

在此处输入图像描述

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

在此处输入图像描述

于 2018-05-20T02:10:22.973 回答
3

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

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

FF 量子开发工具

于 2018-02-26T22:15:35.097 回答
2

我使用了这样的东西 if($._data($("a.wine-item-link")[0]).events == null) { ... 做一些事情，几乎再次绑定他们的事件处理程序 } 来检查如果我的元素绑定到任何事件。如果您已从该元素中取消附加所有事件处理程序，它仍会显示未定义 (null)。这就是我在 if 表达式中评估它的原因。

于 2014-03-31T05:37:00.730 回答
1

当我像这样将一些复杂的 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/

于 2014-03-14T07:49:03.773 回答