41

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

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

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

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

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

我知道它可以以编程方式完成（我可以使用 jQuery 找到绑定在元素上的事件吗？）

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

更新：我发现在较新的 Chrome 版本中，我有一个名为EventListeners的选项卡，但似乎它不允许轻松深入到事件源，因为 jQuery 包装了原始

4

6 回答 6

35

获取第一个 $("#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在此处输入图像描述

于 2014-02-06T05:01:44.873 回答
28

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

于 2014-01-21T04:41:41.133 回答
22

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

于 2013-09-18T18:19:36.013 回答
3

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

这是一个检查jQuery click 文档中的“First Paragraph”元素的示例：

Firefox 开发者工具中的绑定事件

于 2015-07-01T02:58:02.640 回答
1

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

于 2016-08-17T11:01:28.000 回答
0

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

于 2012-07-14T23:43:30.953 回答