• Hit F12 or open Dev Tools
  • Click the Sources tab
  • On right-hand side, scroll down to “Event Listener”, and expand tree
  • Click on the events you want to listen for.
  • Interact with the target element, if they fire you will get a break point in the debugger


Similarly, you can right click on the target element -> select “inspect element” Scroll down on the right side of the dev frame, at the bottom is ‘event listeners’. Expand the tree to see what events are attached to the element.


You can use monitorEvents function.

Just inspect your element (right mouse clickInspect on visible element or go to Elementstab in Chrome Developer Tools and select wanted element) then go to Console tab and write:


Now when you move mouse over this element, focus or click it, the name of the fired event will be displayed with its data.

To stop getting this data just write this to console:


$0 is just the last DOM element selected by Chrome Developer Tools. You can pass any other DOM object there (for example result of getElementById or querySelector).

You can also specify event “type” as second parameter to narrow monitored events to some predefined set. For example:

monitorEvents(document.body, 'mouse')

List of this available types is here.

I made a small gif that illustrates how this feature works:



SOURCE StackOverflow