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

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

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

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

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

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


答案 1

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

enter image description here

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

enter image description here


答案 2

您还可以使用 Chrome 的检查器以其他方式查找附加的事件,如下所示:

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

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

'Show Function definition'