使用Chrome，如何找到绑定到元素的事件
假设我的页面上有一个链接：
<a href="#" id="foo">Click Here</a>我不知道其他什么，但当我单击该链接时，会显示一个alert("bar")。所以我知道在某个地方，一些代码正被绑定到#foo。
如何找到将alert("bar")绑定到单击事件的代码？我正在寻找一个使用Chrome的解决方案。
附注:这个例子是虚构的，所以我不是在寻找这样的解决方案：“使用XXXXXX并在整个项目中搜索"alert(\"bar\")”。我想要一个真正的调试/跟踪解决方案。“
回答 8
Stack Overflow用户
发布于 2011-09-08 01:54:18
使用Chrome15.0.865.0开发。在Elements面板上有一个"Event Listeners“部分：
和“脚本”面板上的“事件侦听器断点”。使用鼠标->单击断点，然后“单步执行下一个函数调用”，同时密切关注调用堆栈，查看哪个用户域函数处理该事件。理想情况下，您应该将jQuery的精简版本替换为非精简版本，这样您就不必总是介入，并尽可能使用step over。
Stack Overflow用户
发布于 2014-08-11 13:28:10
您还可以使用Chrome的检查器以另一种方式查找附加事件，如下所示：
- 右键单击要检查的元素，或在“Elements”窗格中找到它。
- 然后在“event Listeners”选项卡/窗格中，展开该事件(例如，显示各个子节点以查找所需的子节点，然后查找“
- ”子节点所在的位置。
- 右键单击“
”一词，然后单击“
- function definition”
这将把您带到定义处理程序的位置，如下图所示，并由Paul爱尔兰在此处进行解释：https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA
Stack Overflow用户
发布于 2015-05-28 00:00:08
尝试一下jQuery审计扩展(https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg)，安装完成后，请执行以下步骤：
从处理程序属性展开Events property
- Choose
- jQuery
- ，右键单击function并选择'Show function now
Event binding code
- 单击'Pretty print‘按钮查看代码
<
- >G214
https://stackoverflow.com/questions/7338193
复制相似问题