Trace the click handler

Question

If I have a click handler bound to a div with an ID, and 4000 lines of javascript/jquery in 10 files... how can I find out what is bound to that ID? Meaning where in those 10 files is the code that is fired?

Is there anyway to see this easily using Firefox for example?

I know I could search each of the files but on a complex site with many files in many directories etc this is not an easy task, and the code might be in a file included and not a js file after all.

Have searched for a solution but found none so far.

For example:

<div id="exp2" onclick="expander(this); manageInvAddr();">
    <span class="info1head">Billing Address</span>
</div>

I want to know within which file the function manageInvAddr(); is, but even worse, the click could be simply attached to the ID without using onClick so you've only an id to search for, which is problematic as there could be many ids re-used throughout a site.

Answer 1

Most DOM inspectors have this built in now. However, if you want to get the events programmatically, you can use the _data() method of jQuery:

var eventsObj = $._data($('#foo')[0], "events")

Note that this returns an object keyed by the event type. Note also that the first parameter of the method is a native DOM element, not a jQuery object or selector.

Example fiddle

Answer 2

Are you searching for something like this ? This is the chrome debugger tool bar.