A little background on JS events
There are two ways to attach JS methods to different events supported by DOM elements.
- One is the declarative way: <div onlick=”someMethod();”>
- The other one is to dynamically add methods using JS. Depending on the browser you will use element.attachEvent, element.addEventListener, element.onclick.
If the way used by the initial developer falls under #1 then you’re in luck. You can see the method name and then just add a breakpoint there.
If it’s #2, then you’re out of luck. Attaching methods to an event can happen anywhere in any file or any other method thus very hard to track.
Here comes the help
…in the form of Visual Event small bookmarklet (a small software application stored as a bookmark in a web browser, which typically allows a user to interact with the currently loaded web page in some way). You need to add it to your bookmark bar and when you need to use it just click on it and it will highlight the DOM elements and the corresponding events.
Unfortunately sometimes Visual Event cannot trace the file where the event is attached (as you can see in the first image) but at least it shows the method and you can manually search it.
Anyway, I find it very useful when trying to determine which method is triggered when an action is performed in the UI especially since it is just a bookmarklet and not a browser plugin.