使用Chrome浏览器，如何查找哪些事件绑定到某个元素 [英] Using Chrome, how to find to which events are bound to an element

问题描述

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

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

我什么都不知道，但是当我点击链接时， ） 被展示。
所以我知道在某个地方，一些代码被绑定到了#foo。

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

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

解决方案

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

单击断点，然后步入下一个函数调用，同时密切关注调用堆栈，以查看哪个用户级函数处理事件。理想情况下，您可以将未缩小版本的jQuery替换为您不必始终 ，并在可能的情况下使用跨越。

< img src =https://i.stack.imgur.com/FxqpX.pngalt =ent呃image description here>

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