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

假设：我发现一个带有按钮（“#bigButton”）的页面，当单击该按钮时，会使用jQuery显示一个llama（'img#theLlama'）

那么，buttons.js中的某个地方（比如第76行）：

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

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

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

*注：悬赏是针对“骆驼问题”的具体答案，即指向上面描述的解决方案*

---

FireQuery对于许多jQuery任务来说是一个很好的工具，但它似乎并没有回答llama的问题。如果我错了，请纠正我。

鉴于您所追求的界面，我认为您需要FireQuery：

---

这是一个专门针对此类领域的Firebug插件（一个特定于jQuery的插件，在数据/事件方面非常强大）。

FireQuery是最方便的，但是如果需要手动执行，可以使用

$（element.data（'events'）。单击[0]。处理程序
（当然，如果有多个单击处理程序，则不一定是0）。从那里开始，您最喜欢的调试器就可以在代码中定位该函数。（使用命名函数有帮助。Firebug有时可以定位匿名函数，但更常见的情况是不能。如果您将鼠标悬停在函数体上方，它将显示函数体。）

更新以下是FireQuery显示数据的方式：

HTML视图：


控制台：

eventbug将向您显示元素的所有事件处理程序，
但处理程序通常是一些通用代码。
使用，并且：
点击Cmd+Shift+C（检查元件）并点击按钮可显示以下内容：

单击事件
对象{click=}
会显示这一点（在展开一些信息之后）


点击
函数（）
会显示以下内容：


哪个应该是你要找的代码，对吗

需要注意的是，Firebug无法始终找到某个源代码的确切行。我已经让此方法完全失败！另一种方法是使用命名函数表达式。将代码更改为：

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

现在，在检查
事件
对象时会显示这一点：


这比只使用
function（）
更有用，因为现在很明显，这个处理程序向我们显示了一个骆驼。您现在还可以在代码中搜索函数名并找到它


使用、其内置的web检查器和：
点击Cmd+Shift+C（检查元素）并点击按钮显示：


单击elements inspector中的按钮，然后按Escape打开JS控制台：

在Chrome控制台中，
$0
表示元素面板中选定的元素

键入
$。\u data（$0）
将为我们提供包含事件的jQuery（内部）数据对象，就像在我们的Firebug示例中一样，遗憾的是，Chrome不允许我们单击函数，但它将让我们看到源代码：



关于事件的说明：
实时事件存储在
$。\u数据（文档，“事件”）
中，并包含指向函数的
origHandler
：

漂亮的插件！让我补充一点，Firebug在JS代码中设置断点的功能有助于调试这类事情。是的，FireQuery很好，已经在我的工具箱中。但是，它似乎没有回答骆驼的问题。或者是这样，但我没有看到它？@Justin-你可以在
\bigButton
上看到这个事件nd查看它的处理程序代码…但您将无法看到它被绑定的大部分时间，因为这可能会有很大的变化。或者，转到控制台：
$（“#bigButton”）.data（“事件”）
要查看所有的处理程序，控制台界面使导航对象变得非常容易。@Nick Craver:这正是我所怀疑的。这就引出了我的最后一点：我们不是更好了吗（至少在这方面）使用onClick属性？@Justin-可能有20个处理程序，绑定在20个位置，绑定，反弹未绑定，可能绑定到气泡的父级，如果它是基于变量的，如果它是
.live（）
完全没有点击处理程序？它是用户触发的事件还是模拟的？这里有很多变量，你必须记住JavaScript引擎跟踪代码是为了让它更快，而不是更容易调试…浏览器希望尽可能快地绑定事件处理程序，以击败其他人，而不是让事件更容易跟踪，这就是本质上更重。当然，多亏了事件冒泡的奇迹，点击按钮可以激活任何父元素上的事件处理程序。如果有很多父元素，Firebug的评测就是你的朋友。但是FireQuery不允许我直接回答llama问题，对吗？我看不出在FireQuery中我可以在哪里检查元素并查看绑定到它的事件。@Justin Myles Holmes:在HTML视图中，它将显示绑定到每个节点的数据；您只需在DOM视图中检查绑定为“事件”的对象，并查看其处理程序属性。控制台还显示是否有与记录的jQuery对象关联的数据，以及小信封（？）右括号前的图标。查看我添加到答案中的图像。我看到“events=Object{click=}”-但我需要确切知道=”后面是什么。如何在.js文件中找到定义单击事件的位置？@Justin Myles-Holmes：只需单击“events=”一个完整的例子将大大有助于澄清这个问题，特别是因为“此元素的事件绑定”不是一个标准术语。我认为您的意思是“元素的位置在哪里。添加的事件列表”