Javascript 使用Chrome，如何找到绑定到元素的事件

假设我的页面上有一个链接：

<a href="#" id="foo">Click Here</a>

我不知道还有什么，但当我点击链接时，会显示一个

警报（“条”）

。 所以我知道在某个地方，一些代码被绑定到

#foo

如何找到将

警报（“栏”）

绑定到单击事件的代码？ 我正在寻找一种使用Chrome的解决方案

注：这个例子是虚构的，所以我不是在寻找这样的解决方案：“使用XXXXXX并在整个项目中搜索“alert（\'bar\”）。我想要一个真正的调试/跟踪解决方案。

编辑：代替我自己的答案，这个非常好：

谷歌Chromes开发者工具在脚本部分内置了搜索功能

如果您不熟悉此工具：（以防万一）

• 右键单击页面上的任意位置（在chrome中）
• 单击“检查元素”
• 单击“脚本”选项卡
• 右上角的搜索栏

快速搜索#ID最终将带您进入绑定函数

例如：搜索

#foo

会让你进入

$('#foo').click(function(){ alert('bar'); })

---

使用Chrome 15.0.865.0 dev。元素面板上有一个“事件侦听器”部分：

和脚本面板上的“事件侦听器断点”。使用鼠标->单击断点，然后“进入下一个函数调用”“同时密切关注调用堆栈，查看哪个userland函数处理该事件。理想情况下，您应该将jQuery的缩小版本替换为未统一的版本，这样您就不必一直介入，并在可能的情况下使用“跳过”

---

您还可以使用Chrome的inspector以另一种方式查找附加事件，如下所示：

右键单击要检查的元素，或在“元素”窗格中找到它

然后在“事件侦听器”选项卡/窗格中，展开事件（例如“单击”）

展开各个子节点以找到所需的子节点，然后查找“handler”子节点的位置

右键单击“函数”，然后单击“显示函数定义”

这将带您到达定义处理程序的位置，如下图所示，并由Paul Irish在此处解释：

---

请尝试使用jQuery Audit扩展（），安装后请执行以下步骤：

检查滤芯

在新的“jQuery审核”选项卡上展开Events属性

选择您需要的活动

在处理程序属性中，右键单击函数并选择“显示函数定义”

现在您将看到事件绑定代码

点击“漂亮的打印”按钮，查看更可读的代码视图

---

FindEventHandler是一个jquery插件，原始代码如下：

步骤

将原始代码直接粘贴到chrome的控制台中（注意：必须已经加载jquery）

使用以下函数调用：

findeventhandler（事件类型，选择器）

要查找相应的选择器，请指定元素的eventType处理程序

示例：

findEventHandlers("click", "#clickThis");

如果有，可用的事件处理程序将显示在下面，您需要展开以查找处理程序，右键单击函数并选择

show function definition

---

请参阅：

有关Chrome版本52.0.2743.116：

在Chrome的开发者工具中，点击

Ctrl

+

Shift

+

F

打开“搜索”面板

键入要查找的元素的名称

绑定元素的结果应显示在面板中，并说明它们所在的文件。

（最新版本为2020年）对于Chrome版本83.0.4103.61：

选择要检查的图元

选择事件侦听器选项卡

确保检查框架侦听器以显示真实的javascript文件，而不是jquery函数

---

2018年更新-可能对未来读者有所帮助：

我不确定这最初是什么时候在Chrome中引入的。但现在在Chrome中实现这一点的另一个（简单）方法是通过控制台命令

例如：（在chrome控制台类型中）

而$0是DOM中选定的元素

---

不错的开始，但是如果我有1500个对#foo的引用，其中大多数都没有绑定任何内容，或者在我的外部脚本中有多个#foo id在本例中没有触发，那该怎么办呢？好问题。根据我的经验，这就是人工调试过程通常开始的地方：）呵呵，你是对的，但我的问题也是关于我作为一个人类必须做什么：越来越近，但其中的大部分结果都指向了第16行。。。jquery.min.js:（（我理解为什么，不需要解释，但是我们如何找到调用jquery的bind（）方法的人？这些工具在Chrome 12.0.742.100中也都有。：）谢谢！@Fluffy:你不必。只要点击

{}

查看js.Magic时，左下角的符号。单步执行jQuery复杂的事件调度代码是一件非常痛苦的事情。下面是jQuery审计的答案（）要将jquery从调用堆栈中排除，请使用黑匣子脚本：@IonuțG.Stan，或mods，您可以使用黑匣子更新答案吗？这似乎是一个与此答案相关的常见问题。这是一个很好的扩展，可以节省大量时间筛选JavaScript。我经常发现“事件侦听器”列表“没有事件监听器”，并且选择“事件监听器断点”>鼠标>单击不会创建断点。此插件工作得很好。@Javier>这是一个很好的响应。它适用于javascript（非jQuery）Mecanime吗？两年了，仍然是这个问题的最佳答案。

getEventListeners($0)