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

Posted 2023-02-21

【中文标题】我可以使用 jQuery 找到绑定在元素上的事件吗？

【英文标题】：Can I find events bound on an element with jQuery?

【发布时间】：2011-01-01 18:57:07

【问题描述】：

我在这个链接上绑定了两个事件处理器：

<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" 的元素上？

【参考方案1】：

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

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

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

【讨论】：

我认为这不是本机功能，需要以下脚本/依赖项：github.com/colxi/getEventListeners 这应该添加到答案中，否则会产生误导。但是感谢您让我使用那个“插件”；看起来不错。 :)

【参考方案2】：

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

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

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

然后看看handler > [[FunctionLocation]]

【参考方案3】：

一般情况：

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

同样，您可以：

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

【讨论】：

我同意这是首选方法，并且是一种通用解决方案，而不是依赖 jQuery，它可能可用也可能不可用。

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

在其他情况下理解答案也很有帮助。仅仅因为有人问了一个特定的问题，并不意味着他们将收到的受限答案是最好的答案。尤其是对于 jQuery，人们倾向于依赖它作为拐杖。了解底层架构很重要。这个答案表明 jQuery 甚至不是必需的。问题和示例过于模糊，无法了解其用法，因此可以解释什么可以被视为有效答案。

【参考方案4】：

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

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

【讨论】：

很棒的答案，尤其是截图让它变得容易多了。感谢您的努力！

【参考方案5】：

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

【讨论】：

这仅适用于通过 jQuery 助手绑定的元素。

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

@marcus 啊哈，哎呀，我错过了一些东西，抱歉 :) $._data(element[0], ‘events’);

现在必须使用：$._data( $('#foo')[0] ).events

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

【参考方案6】：

我为后代添加这个；有一种更简单的方法，不需要编写更多的 JS。使用amazing firebug addon for firefox，

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

【讨论】：

这在 IE 开发工具中也可用。

【参考方案7】：

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

【参考方案8】：

jQuery Audit plugin 插件应该可以让您通过普通的 Chrome 开发工具执行此操作。它并不完美，但它应该让您看到绑定到元素/事件的实际处理程序，而不仅仅是通用 jQuery 处理程序。

【参考方案9】：

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

所以我不得不在父 div 上使用 $._data：$._data($('#outerWrap')[0], 'events') 来查看 a 标签的事件。这是相同的 JSFiddle：http://jsfiddle.net/giri_jeedigunta/MLcpT/4/

【讨论】：

这样做的原因是您从$('#outerWrap') 委派活动。事件实际上是绑定到该元素而不是单个锚点。