javascript - 使用 Chrome，如何查找绑定到元素的事件

Question

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

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

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

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

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

score 147 · Accepted Answer

使用Chrome 15.0.865.0 开发。Elements 面板上有一个“Event Listeners”部分：

在此处输入图像描述

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

在此处输入图像描述

score 49 · Accepted Answer

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

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

'显示函数定义'

score 17 · Accepted Answer

score 13 · Accepted Answer

（截至 2020 年的最新版本）对于 Chrome 版本 83.0.4103.61 版本：

score 6 · Accepted Answer

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

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

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

例如：搜索#foo会带你到

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

在此处输入图像描述

score 6 · Accepted Answer

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

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

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

getEventListeners($0)

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

score 5 · Accepted Answer

脚步

将原始代码直接粘贴到 chrome 的控制台中（注意：必须已经加载了 jquery）
使用以下函数调用： findEventHandlers(eventType, selector);
找到对应的选择器指定元素的 eventType 处理程序。

示例：

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

然后如果有，可用的事件处理程序将显示如下，您需要展开找到处理程序，右键单击该函数并选择show function definition

score 3 · Accepted Answer

对于 Chrome 版本 52.0.2743.116：

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

8 回答 8