使用 Chrome，如何查找绑定到元素的事件 [英] Using Chrome, how to find to which events are bound to an element

问题描述

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

Lets suppose I've a link on my page:

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

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

I don't know anything else, but when I click on the link, an alert("bar") is displayed. So I know that somewhere, some code is getting bound to #foo.

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

How can I find the code that is binding the alert("bar") to the click event? I'm looking for a solution with Chrome.

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

Ps.: The example is fictive, so I'm not looking for solution like: "Use XXXXXX and search the whole project for "alert("bar")". I want a real debugging/tracing solution.

推荐答案

使用 Chrome 15.0.865.0 dev.Elements 面板上有一个事件侦听器"部分:

Using Chrome 15.0.865.0 dev. There's an "Event Listeners" section on the Elements panel:

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

And an "Event Listeners Breakpoints" on the Scripts panel. Use a Mouse -> click breakpoint and then "step into next function call" while keeping an eye on the call stack to see what userland function handles the event. Ideally, you'd replace the minified version of jQuery with an unminified one so that you don't have to step in all the time, and use step over when possible.

这篇关于使用 Chrome，如何查找绑定到元素的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！