jQuery 使用 Chrome 开发工具/Firebug/IE 开发者工具栏查找元素的附加/绑定事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11065358/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Find attached / bound events of an element using Chrome Development Tools / Firebug / IE Developer Toolbar
提问by Eran Medan
When inspecting a page's DOM, I would like to know the attached event(s) of an element quickly
在检查页面的 DOM 时，我想快速了解元素的附加事件
For example, if a button has this HTML DOM
例如，如果一个按钮有这个 HTML DOM
<button id="button1">Click Me</button>
And somewhere (not in a place that I know in advance) it has an event attached, e.g.
在某个地方（不是在我事先知道的地方）它附加了一个事件，例如
$("#button1").click(function(){...});
I know it can be done programatically ( Can I find events bound on an element with jQuery?)
我知道它可以通过编程方式完成（我可以用 jQuery 找到绑定在元素上的事件吗？）
but is there a way using just one of the developer tools for Chrome / Firefox / IE to see a list of events?
但是有没有办法只使用 Chrome / Firefox / IE 的开发人员工具之一来查看事件列表？
Update: I found out that in the newer Chrome versions I have a tab called EventListenersbut it seems it doesn't allow easy drill down all the way down to the source of the event, as jQuery wraps the original
更新：我发现在较新的 Chrome 版本中，我有一个名为EventListeners的选项卡，但它似乎不允许轻松深入到事件源，因为 jQuery 包装了原始
采纳答案by olore
FireQuery - http://firequery.binaryage.com/lets you see events bound to elements and drill into them
FireQuery - http://firequery.binaryage.com/可让您查看绑定到元素的事件并深入了解它们
回答by Shanimal
To get the first attached handler on the first $("#button1") element
获取第一个 $("#button1") 元素上的第一个附加处理程序
$._data($("#button1").get(0),"events").click[0].handler
The long story that nobody wants to hear:I came here searching for a plugin. I was thrilled to see @schmidlop's answer, but in jQuery that doesn't actually give me the listener I'm looking for, it just shows the generic handler for jQuery events that eventually call the specific callback. Im still looking for a Chrome plugin that would allow me to right click on an element and let me drill into the handlers attached to the object.
没人想听的长篇大论：我来这里是为了寻找插件。我很高兴看到@schmidlop 的回答，但在 jQuery 中实际上并没有给我我正在寻找的侦听器，它只是显示最终调用特定回调的 jQuery 事件的通用处理程序。我仍在寻找一个 Chrome 插件，它可以让我右键单击一个元素，让我深入了解附加到对象的处理程序。
Cause that would be cool.
因为那会很酷。
UPDATE:I found a chrome extension called jQuery Debugger. You simply "Inspect Element" and choose "jQuery Events" from the "Elements" submenu...https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi
更新：我发现了一个名为 jQuery Debugger 的 chrome 扩展。您只需“检查元素”并从“元素”子菜单中选择“jQuery 事件”... https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi
回答by schmidlop
There is now an Event Listeners tab in Chrome.
Chrome 现在有一个事件侦听器选项卡。
回答by Florent2
With the Chrome inspector select the element in the "Elements" tab and then from the "Console" tab you can see the events attached to the element with getEventListeners($0);.
使用 Chrome 检查器在“元素”选项卡中选择元素，然后从“控制台”选项卡中您可以看到附加到带有getEventListeners($0);.
回答by djsutho
Firefox's developer tools now display an "ev" next to elements which have bound events. This can be used to inspect bound events (including jQuery events).
Firefox 的开发人员工具现在在具有绑定事件的元素旁边显示一个“ev”。这可用于检查绑定事件（包括 jQuery 事件）。
Here is an example of inspecting the "First Paragraph" element from the jQuery click documentation:
这是检查jQuery 单击文档中的“第一段”元素的示例：
回答by Gaurav Mishr
You can also check Visual Event addon available for chrome.
您还可以查看适用于 chrome 的 Visual Event 插件。
