How to find out which JavaScript events fired?
Regarding Chrome, checkout the monitorEvents() via the command line API.
Open the console via Menu > Tools > JavaScript Console.
Enter
monitorEvents(window);
View the console flooded with events
... mousemove MouseEvent {dataTransfer: ...} mouseout MouseEvent {dataTransfer: ...} mouseover MouseEvent {dataTransfer: ...} change Event {clipboardData: ...} ...
There are other examples in the documentation. I'm guessing this feature was added after the previous answer.
Looks like Firebug (Firefox add-on) has the answer:
- open Firebug
- right click the element in HTML tab
- click
Log Events
- enable Console tab
- click Persist in Console tab (otherwise Console tab will clear after the page is reloaded)
- select
Closed
(manually) there will be something like this in Console tab:
... mousemove clientX=1097, clientY=292 popupshowing mousedown clientX=1097, clientY=292 focus mouseup clientX=1097, clientY=292 click clientX=1097, clientY=292 mousemove clientX=1096, clientY=293 ...
Source: Firebug Tip: Log Events
Just thought I'd add that you can do this in Chrome as well:
Ctrl + Shift + I (Developer Tools) > Sources> Event Listener Breakpoints (on the right).
You can also view all events that have already been attached by simply right clicking on the element and then browsing its properties (the panel on the right).
For example:
Not sure if it's quite as powerful as the firebug option, but has been enough for most of my stuff.
Another option that is a bit different but surprisingly awesome is Visual Event: http://www.sprymedia.co.uk/article/Visual+Event+2
It highlights all of the elements on a page that have been bound and has popovers showing the functions that are called. Pretty nifty for a bookmark! There's a Chrome plugin as well if that's more your thing - not sure about other browsers.
AnonymousAndrew has also pointed out monitorEvents(window);
here