检查元素以研究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和这个小提琴:

点击Cmd + Shift + C(检查元素)并单击按钮显示:

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

然后点击function()显示:

哪个应该是你要找的代码,对吧？

作为一个注释,Firebug无法始终找到确切的代码行.我已经完全失败了!另一种方法是使用命名函数表达式.将代码更改为:

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

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

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

使用Chrome,其内置的Web检查器和这个小提琴:

点击Cmd + Shift + C(检查元素)并单击按钮显示:

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

在Chrome控制台中,$0引用元素面板中的选定元素.

键入$._data( $0 )将为我们提供包含事件的jQuery(内部)数据对象,就像在我们的Firebug示例中一样,遗憾的是,Chrome不会让我们点击该函数,但它会让我们看到源:

<Broken Screenshot link>

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

实时事件存储在$._data( document, "events" )并包含origHandler指向该功能的事件:

<Broken screenshot link>