使用 Chrome，如何查找哪些事件绑定到元素

Question

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

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

我不知道其他任何内容，但是当我单击该链接时，会显示一个 alert("bar") 。 所以我知道在某个地方，某些代码被绑定到 #foo。

如何找到将 alert("bar") 绑定到点击事件的代码？ 我正在寻找 Chrome 的解决方案。

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

Answer 1

使用 Chrome 15.0.865.0 开发版。元素面板上有一个“事件监听器”部分：

脚本上有一个“事件监听器断点”控制板。使用鼠标 ->单击断点，然后“单步执行下一个函数调用”，同时密切关注调用堆栈以查看哪个用户态函数处理该事件。理想情况下，您可以将 jQuery 的缩小版替换为未缩小版，这样您就不必一直介入，并在可能的情况下使用逐步跨越。

Answer 2

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

1. 右键单击要检查的元素，或在“元素”窗格中找到它。
2. 然后在“事件监听器”选项卡/窗格中，展开事件（例如“单击”），
3. 展开各个子节点以找到所需的子节点，然后查找“处理程序”子节点所在的位置。
4. 右键单击“函数”一词，然后单击“显示函数定义”

这将带您到定义处理程序的位置，如下图所示，Paul Irish 在此进行了解释：https://groups.google.com/forum/#!topic/google-chrome- developer-tools/NTcIS15uigA

Answer 3

尝试一下 jQuery Audit 扩展 (https://chrome.google.com/webstore/detail/ jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg)，安装后按照以下步骤操作：

1. 元素
2. 检查 新的“jQuery Audit”选项卡展开“事件”属性，
3. 选择您需要的事件
4. 从处理程序属性中，右键单击函数并选择“显示函数定义”
5. 您现在将看到事件绑定代码
6. 单击“漂亮打印”按钮以获得更易读的代码视图

Answer 4

（最新截至 2022 年）对于 Chrome 版本 99 版：

1. 选择要检查的元素

2. 选择“事件侦听器”选项卡

3. 确保选中“框架侦听器”以显示真正的 javascript 文件而不是 jquery 函数。

Answer 5

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

我不确定 Chrome 最初何时引入此功能。但现在可以在 Chrome 中完成此操作的另一种（简单）方法是通过控制台命令。

例如：（在 Chrome 控制台中输入）

getEventListeners($0)

而 $0 是 DOM 中选定的元素。

https://developers.google.com /web/tools/chrome-devtools/console/command-line-reference#0_-_4

Answer 6

编辑：代替我自己的答案，这个答案相当出色：如何使用 Firebug（或类似工具）调试 JavaScript/jQuery 事件绑定

Google Chrome 开发者工具内置搜索功能脚本部分

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

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

快速搜索 # ID 最终会带您进入绑定功能。

例如：搜索 #foo 会将您带到

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

Answer 7

findEventHandlers 是一个 jquery 插件，原始代码在这里： https://raw.githubusercontent .com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

步骤

1. 将原始代码直接粘贴到chrome 的控制台(注意：必须已经加载 jquery)

2. 使用以下函数调用： findEventHandlers(eventType, 选择器) ;
   查找对应的选择器指定元素的 eventType 处理程序。

示例：

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

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

参见：https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

Answer 8

对于 Chrome 版本 52.0.2743.116：

1. 在 Chrome 的开发者工具中，按 Ctrl+Shift+F 打开“搜索”面板。

2. 输入您要查找的元素的名称。

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