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

javascript jquery events dom-events
Daniel T. picture Daniel T. · Sep 16, 2011 · Viewed 117.9k times · Source

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

sidonaldson picture sidonaldson · Sep 17, 2013

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

Related questions

jQuery equivalent of JavaScript's addEventListener method

I'm trying to find the jQuery equivalent of this JavaScript method call: document.addEventListener('click', select_element, true); I've gotten as far as: $(document).click(select_element); but that doesn't achieve the same result, as the last parameter of the …

Read More
How do you detect the clearing of a "search" HTML5 input?

In HTML5, the search input type appears with a little X on the right that will clear the textbox (at least in Chrome, maybe others). Is there a way to detect when this X is clicked in Javascript or jQuery …

Read More
How are custom broadcast events implemented in JavaScript (or jQuery)?

I want to implement a custom event that can be "broadcast", rather than sent to specific targets. Only those elements that have registered themselves as listeners for such events will receive them. What I have in mind would look as …

Read More