使用Chrome,如何找到绑定到元素的事件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (16)

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

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

我什么都不知道,但是当我点击链接时,会显示一个警告(“栏”)。所以我知道在某个地方,一些代码被绑定到#foo。

如何找到将警报(“栏”)绑定到点击事件的代码?我正在寻找Chrome的解决方案。

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

提问于
用户回答回答于

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

以及脚本面板上的“事件侦听器断点”。使用鼠标->单击断点,然后“逐步进入下一个函数调用”,同时监视调用堆栈,以查看userland函数处理事件的内容。理想情况下,你应该将精简版本的jQuery替换为一个不受限制的版本,这样你就不必介入所有的时间。

用户回答回答于

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

  1. 右键单击要检查的元素,或在“元素”窗格中找到它。
  2. 然后在'Event Listeners'选项卡/窗格中,展开事件(例如'click')
  3. 展开各个子节点以找到你需要的子节点,然后查找“处理程序”子节点的位置。
  4. 右键单击“函数”一词,然后单击“显示函数定义”

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

扫码关注云+社区