Javascript how do I find what function call resulted in a specific UI event??

Question

I want to find out what triggered an event. Namely, the notification bar on this site stackoverflow.com (the bar that tells you when someone has posted an answer to a question you're writing an answer on. It scrolls down slowly from the top and provides a really nice UI for user notifications. I've seen it work on just about ever page.

I imagine it working something (I need to find its name):

special_notification( message );

In the abstract, how do I go about finding out what the call (function name and arguments) looks like that generates that effect when all of the javascript is minified, and I have no idea what include provided it.

Answer 1

To read minified js, you can use a tool like http://jsbeautifier.org.

Regarding your other concern, you want to listen to all the events on a page and know what triggered them and what is the code executed? is that correct?

Update:

There is no way to listen to all the events. If you really need to, you can set up listeners for every event, but you will still miss the custom events, which i guess are what you are after.

I'd suggest you inspect the code using Firebug to learn how the events are used in each case.

You can also listen to all the DOM Events, in jQuery you will do:

$('body').bind('DOMSubtreeModified', function(e){
  console.log('DOMSubtreeModified triggered');
  console.log(e); //Firebug console.
});

Where e will hold the event information.

Hope that makes sense.

Answer 2

1. Download and install firebug in Firefox.
2. Go to the URL you're interested in, and open firebug. You might need to reload the page.
3. Now click on the little arrow icon on the top right hand side of firebug. This will let you highlight any element on the page and provide the corresponding HTML to that element.
4. Now that you have the id of the element, you should be able to find it in the javascript code. Even if it's minified, the name needs to correspond the DOM name.