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

Question

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

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

我什么都不知道，但是当我点击链接时，会显示 alert("bar") 。所以我知道在某个地方，一些代码被绑定到 #foo 。

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

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

原文由 FMaz008 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Ionuț G. Stan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

1. 右键单击要检查的元素，或在“元素”窗格中找到它。
2. 然后在“事件监听器”选项卡/窗格中，展开事件（例如“点击”）
3. 展开各种子节点找到你想要的那个，然后寻找’handler’子节点在哪里。
4. 右键单击“函数”一词，然后单击“显示函数定义”

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

原文由 Matty J 发布，翻译遵循 CC BY-SA 3.0 许可协议