How do you log all events fired by an element in jQuery?

Question

I'd like to see all the events fired by an input field as a user interacts with it. This includes stuff like:

1. Clicking on it.
2. Clicking off it.
3. Tabbing into it.
4. Tabbing away from it.
5. Ctrl+C and Ctrl+V on the keyboard.
6. Right click -> Paste.
7. Right click -> Cut.
8. Right click -> Copy.
9. Dragging and dropping text from another application.
10. Modifying it with Javascript.
11. Modifying it with a debug tool, like Firebug.

I'd like to display it using console.log. Is this possible in Javascript/jQuery, and if so, how do I do it?

Answer 1

I have no idea why no-one uses this... (maybe because it's only a webkit thing)

Open console:

monitorEvents(document.body); // logs all events on the body  monitorEvents(document.body, 'mouse'); // logs mouse events on the body  monitorEvents(document.body.querySelectorAll('input')); // logs all events on inputs 

Answer 2

$(element).on("click mousedown mouseup focus blur keydown change",function(e){      console.log(e); }); 

That will get you a lot (but not all) of the information on if an event is fired... other than manually coding it like this, I can't think of any other way to do that.