检查元素以研究jQuery事件绑定

Question

假设：我找到一个带有按钮的页面（'#bigButton'），单击该按钮会导致llama（'img #theLlama'）使用jQuery显示（）。

所以，在buttons.js的某个地方（比如第76行）：

$('#bigButton').click(function(){
$('img#theLlama').show();
})

现在，假设我有一个包含大量.js文件的大HTML页面。我可以点击按钮看到骆驼出现，但我不知道上面的代码在哪里。

我正在寻找的解决方案与Firebug中的CSS提供的解决方案非常相似。我想检查元素并告诉我这个jQuery发生在buttons.js的第76行，以及该元素上的任何其他绑定。

* 注意：赏金是针对'美洲驼问题'的特定答案，即指向上述解决方案。 *

FireQuery是许多jQuery任务的一个很好的工具，但它似乎没有回答骆驼问题。如果我对此有误，请纠正我。

Answer 1

使用Firebug，FireQuery和this fiddle：

点击Cmd + Shift + C（检查元素）并点击按钮显示：

点击事件Object {click= }会显示此信息（扩展一些信息后）

点击function()即可显示：

你要找的代码应该是什么，对吧？

作为一个说明，Firebug无法始终找到确切的代码行。我已经完全失败了！另一种方法是使用命名函数表达式。将代码更改为：

$('#bigButton').click(function showMyLlama(){
  $('img#theLlama').show();
})

现在在检查events对象时显示这个：

这比function()更有用，因为现在显然这个处理程序向我们展示了一只美洲驼。您现在也可以在代码中搜索函数名称并找到它！

---

使用Chrome，其内置的Web检查器和this fiddle：

点击Cmd + Shift + C（检查元素）并单击按钮显示：

单击元素检查器中的按钮，然后按Escape打开JS控制台：

在Chrome控制台中，$0引用元素面板中的所选元素。

键入$._data( $0 )将为我们提供包含事件的jQuery（内部）数据对象，就像我们的Firebug示例一样，遗憾的是，Chrome不会让我们点击该功能，但它会让我们看到源代码：

<Broken Screenshot link>

---

关于.live()事件的说明：

直播活动存储在$._data( document, "events" )上，并包含指向该功能的origHandler：

<Broken screenshot link>

Answer 2

鉴于您所使用的界面，我认为您需要FireQuery：http://firequery.binaryage.com/

对于像这样的区域（特定于jQuery的插件，数据/事件很强），这是一个Firebug插件 。

Answer 3

FireQuery是最方便的，但如果您需要手动执行，您可以使用$(element).data('events').click[0].handler获得对点击处理功能的引用（当然，如果有多个点击处理程序，则不一定是0）。从那里，你最喜欢的调试器在代码中找到该功能。 （使用命名函数有帮助.Firebug有时可以找到匿名函数，但通常不会。但是如果你用鼠标悬停在它上面，它会显示函数体。）

更新这就是使用FireQuery显示数据的方式：

HTML视图：

控制台：

Answer 4

好的eventbug将显示元素的所有事件处理程序， http://getfirebug.com/releases/eventbug 但通常处理程序是一些通用代码。