How to use Firebug for debugging ACTUAL events/listeners?

Question

I'd like inspect especially Drupal's Javascript/AJAX events so that I could "hook" into them with own Javascript.

For instance how to hook into Add another module's Javascript events when it fires and when it is ready? How to acquire name of the event and other relevant definitions? Submit buttons has to be the one for this.

Firefox developer tool must be a great tool - if you know how to use it. Also Chromes developer tool and if I take a look at for example a submit button on a form on Drupal site it lists 30-40 events/listeners under devtools Events tab.

Too much, too fast
There are multiple mentions of jquery.js, ajax.js, form.js, different js includes from modules etc. Are these all really used for one button? Or are these just as "for your information" and "scraped" from all those included Javascript files? Like a documentation that hey, this can do this and that and you can use these and those properties etc...

What is actually relevant and what is just FYI?
How to find just the right ones from there? Now this 30-40 listeners/events/whatever seem quite overwhelming... And if there's something that is only for informative purpose then can it be filtered to show only valid things that are actually used?

What comes from which Javascript file?
By using unmodified Javascript files it makes more sense since all parameters are exposed in complete sensible names and not as a, b and c etc. However, the Scripts tab with Watch functionality offers quite a number of variables and there's no connection to Javascript files so one can't know what is actually defined in which Javascript file? And is something browser based?

Answer 1

I'd like inspect especially Drupal's Javascript/AJAX events so that I could "hook" into them with own Javascript.

For instance how to hook into Add another module's Javascript events when it fires and when it is ready? How to acquire name of the event and other relevant definitions? Submit buttons has to be the one for this.

Firefox developer tool must be a great tool - if you know how to use it. Also Chromes developer tool and if I take a look at for example a submit button on a form on Drupal site it lists 30-40 events/listeners under devtools Events tab.

Too much, too fast
There are multiple mentions of jquery.js, ajax.js, form.js, different js includes from modules etc. Are these all really used for one button? Or are these just as "for your information" and "scraped" from all those included Javascript files? Like a documentation that hey, this can do this and that and you can use these and those properties etc...

What is actually relevant and what is just FYI?
How to find just the right ones from there? Now this 30-40 listeners/events/whatever seem quite overwhelming... And if there's something that is only for informative purpose then can it be filtered to show only valid things that are actually used?

What comes from which Javascript file?
By using unmodified Javascript files it makes more sense since all parameters are exposed in complete sensible names and not as a, b and c etc. However, the Scripts tab with Watch functionality offers quite a number of variables and there's no connection to Javascript files so one can't know what is actually defined in which Javascript file? And is something browser based?