Javascript 检查元素以调查 jQuery 事件绑定
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3960709/
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
Inspect an element to investigate jQuery event bindings
提问by jMyles
Hypothetical: I find a page with a button ('#bigButton'), that when clicked causes a llama ('img#theLlama') to show() using jQuery.
假设：我找到一个带有按钮 ('#bigButton') 的页面，单击该按钮时会导致美洲驼 ('img#theLlama') 使用 jQuery 显示 ()。
So, somewhere (say, Line 76) in buttons.js:
所以，在buttons.js 的某个地方（比如第 76 行）：
$('#bigButton').click(function(){
$('img#theLlama').show();
})
Now, let's say I have a big HTML page with a whole bunch of .js files included. I can click on the button and see the llama appear, but I have no idea where the code above is.
现在，假设我有一个包含一大堆 .js 文件的大型 HTML 页面。我可以单击按钮并看到美洲驼出现，但我不知道上面的代码在哪里。
The solution I am looking for is very similar to that which is available with CSS in Firebug. I want to inspect the element and have it show me that this jQuery occurs in Line 76 of buttons.js, along with any other bindings on this element.
我正在寻找的解决方案与 Firebug 中 CSS 可用的解决方案非常相似。我想检查该元素并让它显示这个 jQuery 出现在 button.js 的第 76 行，以及该元素上的任何其他绑定。
*Note: The bounty is for a specific answer to the 'llama question,' ie pointing to a the solution that is described above. *
*注意：赏金是针对“美洲驼问题”的特定答案，即指向上述解决方案。*
FireQuery is a great tool for many jQuery tasks, but it does not seem to answer the llama question. If I am wrong about this, please correct me.
FireQuery 是许多 jQuery 任务的绝佳工具，但它似乎并没有回答美洲驼的问题。如果我对此有错误，请纠正我。
回答by gnarf
Using Firebug, FireQueryand this fiddle:
使用Firebug、FireQuery和这个小提琴：
Hitting Cmd+Shift+C (Inspect Element) and clicking on the buttonreveals this:
点击 Cmd+Shift+C（检查元素）并点击按钮显示：
Clicking on the events Object {click= }reveals this (after expanding some info)
单击事件会Object {click= }显示这一点（展开一些信息后）
And clicking on the function()reveals this:
并点击function()揭示这一点：
Which should be the code you are looking for, right?
哪个应该是您要查找的代码，对吗？
As a note, Firebug can't always find the exact line of code something came from. I've had this method fail completely! Another approach is to use named function expressions. Changing the code to:
需要注意的是，Firebug 并不总能找到某些东西来自的确切代码行。我已经完全失败了这个方法！另一种方法是使用命名函数表达式。将代码更改为：
$('#bigButton').click(function showMyLlama(){
$('img#theLlama').show();
})
Now reveals this when inspecting the eventsobject:
现在在检查events对象时揭示这一点：
Which is way more useful than just function()as it is now obvious that this handler shows us a llama. You can also now search the code for the function name and find it!
这比function()现在很明显这个处理程序向我们展示了一只美洲驼更有用。您现在还可以搜索函数名称的代码并找到它！
Using Chrome, its built in web inspector and this fiddle:
使用Chrome，它的内置网络检查器和这个小提琴：
Hitting Cmd+Shift+C (Inspect Element) and clicking on the button shows this:
点击 Cmd+Shift+C（检查元素）并点击按钮显示：
Clicking on the button in the elements inspector then pressing Escape to open the JS Console:
单击元素检查器中的按钮，然后按 Escape 打开 JS 控制台：
In the Chrome Console, $0refers to the selected element in the elements panel.
在 Chrome 控制台中，$0指的是元素面板中的选定元素。
Typing in $._data( $0 )will give us the jQuery (internal) data object which includes events, just like in our Firebug example, sadly, Chrome wont let us click on the function, but it will let us see the source:
输入$._data( $0 )将给我们包含事件的 jQuery（内部）数据对象，就像在我们的 Firebug 示例中一样，遗憾的是，Chrome 不会让我们点击该函数，但它会让我们看到源：
<Broken Screenshot link>
<Broken Screenshot link>
A note about .live()events:
关于.live()事件的说明：
Live Events are stored on $._data( document, "events" )and contain an origHandlerthat points at the function:
实时事件存储在$._data( document, "events" )并包含origHandler指向函数的 ：
<Broken screenshot link>
<Broken screenshot link>
回答by Nick Craver
Given the interface you're after, I think you'll want FireQuery: http://firequery.binaryage.com/
鉴于你所追求的界面，我想你会想要 FireQuery：http: //firequery.binaryage.com/
It's a Firebug addon specificallyfor areas like this (a jQuery specific addon, strong in data/events).
这是一个专门用于此类领域的 Firebug 插件（一个 jQuery 特定插件，在数据/事件方面很强）。
回答by Tgr
FireQuery is the most convenient, but if you need to do it manually, you can get a reference to the click handling function with $(element).data('events').click[0].handler(of course it is not necessarily 0 if there are multiple click handlers). From there it is up to your favorite debugger to locate that function in the code. (Using named functions helps. Firebug can sometimes locate anonymous functions, but more often not. It will show the body of the function though, if you hover above it with the mouse.)
FireQuery 是最方便的，但是如果你需要手动去做，你可以得到对点击处理函数的引用$(element).data('events').click[0].handler（当然如果有多个点击处理程序，它不一定是0）。从那里开始，您最喜欢的调试器可以在代码中找到该函数。（使用命名函数会有所帮助。Firebug 有时可以定位匿名函数，但更多时候不是。不过，如果您将鼠标悬停在函数体上方，它会显示函数体。）
Updatethis is how data is shown with FireQuery:
更新FireQuery 显示数据的方式：
HTML view:
HTML 视图：
console:
安慰：
回答by johnjbarton
Well eventbug will show you all of the event handlers for an element, http://getfirebug.com/releases/eventbugbut often the handler is some generic code.
好吧，eventbug 会向您展示一个元素的所有事件处理程序，http://getfirebug.com/releases/eventbug 但通常处理程序是一些通用代码。
