使用Chrome，如何查找谁绑定到事件？ [英] Using Chrome, how to find who's binded to an event?

问题描述

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

 < a href =＃id =foo >点击此处< / a> 
  

我不知道别的什么，但是当我点击链接，一个警报） 被展示。
所以我知道某处，一些代码被绑定到#foo。

我如何找到绑定警报的代码（bar）到点击事件？
我正在寻找一个解决方案与Chrome。

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

解决方案

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

在脚本面板上还有一个事件侦听器断点 。使用鼠标 - >点击断点，然后注意下一个函数调用，同时关注调用堆栈，看看用户函数处理事件的理想情况，理想情况下，您将以未破坏的方式替换最小化的jQuery版本您不必一直执行 ，尽可能使用 。

< img src =https://i.stack.imgur.com/FxqpX.pngalt =ent呃图片说明这里>

Let suppose I've a link on my page:

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

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 binded to #foo.

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.: 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.

解决方案

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

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屋！