检查元素以调查 jQuery 事件绑定

Question

假设：我发现一个带有按钮 ('#bigButton') 的页面，当单击该按钮时，会使用 jQuery 显示 () 美洲驼 ('img#theLlama')。

所以，buttons.js 中的某处（比如第 76 行）：

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

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

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

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

FireQuery 是许多 jQuery 任务的绝佳工具，但它似乎无法回答 llama 问题。如果我对此有错误，请纠正我。

Answer 1

使用Firebug、FireQuery 和this fiddle：

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

点击事件Object {click= } 显示这一点（展开一些信息后）

点击function() 会显示：

应该是您要查找的代码，对吧？

请注意，Firebug 并不总能找到某样东西的确切代码行。我已经让这种方法完全失败了！另一种方法是使用命名函数表达式。将代码更改为：

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

现在在检查 events 对象时会显示这一点：

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

---

使用Chrome，其内置的网络检查器和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/

这是一个 Firebug 插件专门用于这样的领域（一个 jQuery 特定插件，强大的数据/事件）。

Answer 3

FireQuery是最方便的，但是如果需要手动做，可以用$(element).data('events').click[0].handler获取点击处理函数的引用（当然如果有多个点击处理函数也不一定是0）。从那里，您最喜欢的调试器可以在代码中找到该函数。 （使用命名函数会有所帮助。Firebug 有时可以定位匿名函数，但更多情况下不能。不过，如果您将鼠标悬停在函数上方，它会显示函数的主体。）

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

HTML 视图：

控制台：

Answer 4

那么 eventbug 会向你展示一个元素的所有事件处理程序， http://getfirebug.com/releases/eventbug 但通常处理程序是一些通用代码。