We Keep Coding

Can I somehow observe, which javascript events are fired? (active debug tool)

When I'm in a complex website such as Facebook and write a comment and push Enter there is an event fired that starts everything. Can I somehow observe which events are fired and when (and eventually somehow trace/step them)?
So in general, I'm looking for a tool capable debugging a website in this way. Is there any way?

If you are using devtools of Google Chrome, there is an Event Listeners tab that could help. See the attached picture.
There, I have selected the "Post your answer" button of this very question and as you can see, the EventListeners tab shows that there is at least an onSubmit event listener attached.

One of the debugging tool that i am using and works well for me is firebug in mozila.
you can read about firebug Here
With fire bug you can notice everything like webpage is making how much ajax call, which script is binned with which element. even you can also easily debug the css and design elements. firebug will help you more to debug the website on browser.

Finding out what JS is controlling this

I have a page which is using a nice hover feature which is controlled by javascript, and I was wondering if there is a tool which would tell me what JS is controlling at a specific point as there is a lot of JS files used across the site.

You need a debugging tool, one such tool is mentioned in the comments: Chrome. Once you have the debugger enabled you need to set breakpoints on various events to capture the code flow within all the javascripts. For more info visit here

I would go with Chrome. You can load the page, see all the related JS.
If you are in Chrome, right click on or near the button and click "Inspect Element."
Now you can see all the goodies :)

In google chrome right-click the element, click on "Inspect Element" option. The Chrome Developer window with active Elements tab should appear. You'll see the html structure with your element being highlighted. Right-click on that element and activate all three options in "Break on..." submenu. If some modifications of DOM happen during hover, they will trigger the breakpoint right in the place where you need. But keep in mind, that hover effects can be implemented via css without a bit of javascript, so this plan can fail easily.

As other's have said, use Chrome's web developer toolbar. Go to the sources panel and click the little pause button icon in the lower left corner. This will cause the debugger to activate as soon as the next javascript command is run. Then activate the hover feature - the debugger should pause execution in the callback function that's responsible.
Google actually discusses this exact scenario at the bottom of this documentation page.

Is there a way to tell which javascript file holds an event handler?

This problem has bothered me for a while and Im sure theres some sort of technicality which stops this from being possible, but is there a way to find which Javascript file is linked to a button?
So when I press a submit button and it triggers a Javascript event, I need to find the code which is being triggered rather than trawling through every link in the head of the html trying to find
"jQuery('submitBtn').click(..."
Im using Firebug and sometimes Chrome's console.

You could use Visual Event 2 which tells you the source file and line number (i think it works on chrome)
Visual Event is an open source Javascript bookmarklet which provides
debugging information about events that have been attached to DOM
elements. Visual Event shows:
Which elements have events attached to them
The type of events
attached to an element
The code that will be run with the event is
triggered
The source file and line number for where the attached
function was defined (Webkit browsers and Opera only)

A way to capture the Javascript which is changing an element's CSS property?

I have a div which is getting hidden/displayed by a click on another element. I can see the div's visibility CSS property changing in Firebug. The div is initialized using Microsoft Javascript library in code using:
Sys.Application.add_init(function() {$create.....
How do I get the actual Javascript which runs during run time with every click? Is there a way to intercept the js call and see what code is exactly running, like in Firebug or Chrome's Developer Tools?
(This is NOT a question on how to hide/unhide an element. I know how to do this)

I know in Chrome Dev Tools what you can try to do is:
Find the element clicking on which is causing your div to hide.
Expand it's Event Listeners in the right bar
Expand the click event
Then click the source file displayed there for the click event.
It would take you to where the click event function, so you can put a break point there. This is what you're asking, right?

What tool can I use to find out what JavaScript events are being called when leaving a web page?

I have a set of pages that have tons of JavaScript on it: Table sorting, AJAX calls, autocomplete, dynamically hiding and displaying areas of the page, etc... The problem that I am seeing is when the data on said page gets large a delay (browser freezes) is noticed when leaving the page. This delay happens when the user clicks away, closes the browser, or executes a form submit. I want to see if the problem is caused by JavaScript. What tool could I use to find out? Firebug doesn't seem to work in this scenario.
The only place unload is mentioned in the codebase is in jquery.js and ui.tabs.js (jquery ui)

Are there any onunload event handlers attached (to body, window, form etc.)? If so, it would be a good starting point to investigate.
[Edit]: Apparently jQuery runs a loop unbinding all the events attached to every element. This is to prevent memory leaks in IE (created due to event handler closures referencing the element they are listening to). This could create a delay if your DOM is very complex.
Can you try commenting this portion out in jQuery code and see if that is causing the problem?
[Edit 2]: The window unload seems to have been improved in newer versions of jQuery (1.3+). What version are you using?

Inline Code Finder is a firefox addin (well, really it's a firebug addin) that shows you visually what events are attached where and when they're invoked.