Is there a way to find the event handlers of an element with Javascript?

Question

Say you have this div:

<div id="foo">bar</div>

And you do this:

$("#foo").click(someFunction);

somewhere inside your Javascript code.

Once the page has been loaded, is there a way to find out, via firebug or inspect element in Chrome, or anything else, that the click event for #foo is bound to someFunction? I.e., find this out without having to look through all your code?

Answer 1

Chrome Developer tools does this.

1. right click an element
2. click inspect element
3. in the right hand column, scroll down to event listeners

This will give you a list of event listeners on the object that can be expanded to find their source and the attached function.

Firebug has this information under the DOM tab, but it's less user friendly.