Click Handler Tracking

Question

If I have a click handler associated with a div with id and 4000 javascript / jquery lines in 10 files ... how can I find out what is associated with this id? Meaning, where is the code that is fired in these 10 files?

Anyway, can you easily see this with Firefox?

I know that I could search for 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 can be included in the file, not the js file.

We were looking for a solution, but have not yet found it.

For instance:

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

I want to know in which file the function manageInvAddr(); but even worse, a click can simply be tied to an ID without using onClick so that you only have an identifier to search for, which is problematic because there can be many identifiers reused on the site.

Answer 1

Most DOM inspectors are now built-in. However, if you want to programmatically receive events, you can use the _data() method for jQuery:

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

Note that this returns an object associated with the type of event. Also note that the first parameter to the method is its own DOM element, not a jQuery object or selector.

Script example

Answer 2

Are you looking for something like this? This is a chrome debug toolbar.

Answer 3

Visual Event was a little more useful than Chrome for me, because it visually displays which nodes are associated with events, as well as the line numbers where events are declared. Its a script that allows you to add it to all browsers (even IE).