使用 Chrome 开发工具/Firebug/IE 开发工具栏查找元素的附加/绑定事件答案

【问题标题】：Find attached / bound events of an element using Chrome Development Tools / Firebug / IE Developer Toolbar使用 Chrome 开发工具/Firebug/IE 开发工具栏查找元素的附加/绑定事件
【发布时间】：2012-06-19 09:22:14
【问题描述】：

在检查页面的 DOM 时，我想快速了解元素的附加事件

例如，如果一个按钮有这个 HTML DOM

<button id="button1">Click Me</button>

在某个地方（不是我事先知道的地方）它附加了一个事件，例如

$("#button1").click(function(){...});

我知道它可以通过编程方式完成 (Can I find events bound on an element with jQuery?)

但是有没有办法只使用 Chrome / Firefox / IE 的开发工具之一来查看事件列表？

更新：我发现在较新的 Chrome 版本中，我有一个名为 EventListeners 的选项卡，但似乎无法轻松向下钻取到事件的来源，因为jQuery包装了原来的

【问题讨论】：

你可以看看EventBug Firebug 扩展。但是我不知道它是如何与 jQuery 集成的。但总的来说，不幸的是，在所有开发工具中，对事件监听器的支持都不是很好。

标签： jquery google-chrome-devtools dom-events firebug ie-developer-tools

【解决方案1】：

获取第一个 $("#button1") 元素上的第一个附加处理程序

$._data($("#button1").get(0),"events").click[0].handler

JSFiddle

没人愿意听的长篇大论： 我来这里是为了寻找插件。我很高兴看到@schmidlop 的回答，但是在 jQuery 中，它实际上并没有给我我正在寻找的侦听器，它只是显示了最终调用特定回调的 jQuery 事件的通用处理程序。我仍在寻找一个 Chrome 插件，它允许我右键单击一个元素并让我深入了解附加到对象的处理程序。

因为那会很酷。

更新： 我找到了一个名为 jQuery Debugger 的 chrome 扩展。您只需“检查元素”并从“元素”子菜单中选择“jQuery 事件”...https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi

【讨论】：

$._data($("#button1").get(0),"events").click[0].handler 效果很好！
太棒了……非常理想，因为我不需要任何工具。如果 Chrome 的事件监听器标签可以做到这一点，那就太棒了！

【解决方案2】：

Chrome 中现在有一个事件侦听器选项卡。

【讨论】：

请注意，在此选项卡中，您可以按“所有节点”或“仅选定节点”进行过滤。
没用，因为一切都指向 jquery。使用firefox developer edition，您实际上可以找到正确的处理程序，在我的例子中是一个主干视图。

【解决方案3】：

使用 Chrome 检查器，在“元素”选项卡中选择元素，然后从“控制台”选项卡中，您可以看到附加到带有 getEventListeners($0); 的元素的事件。

【讨论】：

getEventListeners 仅列出绑定到元素本身的事件，不包括其父级的所有代理事件。
@Shanimal 它是 Chrome 在控制台中为您设置的便利变量，请参阅：willd.me/posts/0-in-chrome-dev-tools 以获得很好的解释。
不错。因此，您选择或检查某些内容，并且 $0 在控制台中引用它。非常漂亮。
这对我有用getEventListeners(document.getElementById('button1'));

【解决方案4】：

Firefox 的开发者工具现在在具有绑定事件的元素旁边显示“ev”。这可用于检查绑定事件（包括 jQuery 事件）。

以下是检查jQuery click documentation 中的“第一段”元素的示例：

【讨论】：

【解决方案5】：

您还可以查看适用于 chrome 的 Visual Event 插件。

【讨论】：

【解决方案6】：

FireQuery - http://firequery.binaryage.com/ 可让您查看绑定到元素的事件并深入了解它们

【讨论】：

如果 chrome 有这样的事情（EventListeners 会深入到事件的来源），请随时发表评论！