How to find event listeners on a DOM node when debugging or from the JavaScript code?

  1. Home
  2. javascript
  3. How to find event listeners on a DOM node when debugging or from the JavaScript code?

I have a page where some event listeners are attached to input boxes and select boxes. Is there a way to find out which event listeners are observing a particular DOM node and for what event?

Events are attached using:

  1. Prototype’s Event.observe;
  2. DOM’s addEventListener;
  3. As element attribute element.onclick.

First answer

If you just need to inspect what’s happening on a page, you might try the Visual Event bookmarklet.

Update: Visual Event 2 available;

Second answer

Chrome, Firefox, Vivaldi and Safari support getEventListeners(domElement) in their Developer Tools console.

For majority of the debugging purposes, this could be used.

Below is a very good reference to use it:
https://developers.google.com/chrome-developer-tools/docs/commandline-api#geteventlistenersobject

Third answer

WebKit Inspector in Chrome or Safari browsers now does this. It will display the event listeners for a DOM element when you select it in the Elements pane.

Reprint:https://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node-when-debugging-or-from-the-javascript
Spread the love

Related articles

Comments are closed.