Coder Perfect

In JavaScript or debugging, how do you identify event listeners on a DOM node?

Problem

Some event listeners are tied to input boxes and select boxes on a page I’m working on. Is there a way to see which event listeners are watching a specific DOM node and for which event?

The following are the methods for attaching events:

Asked by Navneet

Solution #1

If you merely want to look at what’s going on on a page, the Visual Event bookmarklet might be useful.

Visual Event 2 is now available.

Answered by Andrew Hedges

Solution #2

In their Developer Tools consoles, Chrome, Firefox, Vivaldi, and Safari allow getEventListeners(domElement).

This could be utilized for the bulk of debugging purposes.

Here’s a great resource to help you out: https://developers.google.com/web/tools/chrome-devtools/console/utilities#geteventlisteners

Answered by Raghav

Solution #3

It all relies on how the events are linked together. As an example, let’s say we have the following click handler:

var handler = function() { alert('clicked!') };

We’ll attach it to our element in a variety of ways, some of which will allow inspection and some of which will not.

A single event handler (method A)

element.onclick = handler;
// inspect
console.log(element.onclick); // "function() { alert('clicked!') }"

Multiple event handlers (method B)

if(element.addEventListener) { // DOM standard
    element.addEventListener('click', handler, false)
} else if(element.attachEvent) { // IE
    element.attachEvent('onclick', handler)
}
// cannot inspect element to find handlers

Method C): jQuery

$(element).click(handler);

(See jQuery.fn.data and jQuery.d for more information.)

Prototype (method D) (messy)

$(element).observe('click', handler);

The console will navigate immediately to the line of the function’s declaration in the relevant JS file when you click the resulting output in the console (which reveals the function’s content).

Answered by Crescent Fresh

Solution #4

This is now possible with WebKit Inspector in Chrome or Safari. When you choose a DOM element in the Elements window, it will show you the event listeners for that element.

Answered by Ishan

Solution #5

In JavaScript, you can get a list of all event listeners: It’s not difficult; all you have to do is alter the HTML element prototype’s method (before adding the listeners).

function reportIn(e){
    var a = this.lastListenerInfo[this.lastListenerInfo.length-1];
    console.log(a)
}


HTMLAnchorElement.prototype.realAddEventListener = HTMLAnchorElement.prototype.addEventListener;

HTMLAnchorElement.prototype.addEventListener = function(a,b,c){
    this.realAddEventListener(a,reportIn,c); 
    this.realAddEventListener(a,b,c); 
    if(!this.lastListenerInfo){  this.lastListenerInfo = new Array()};
    this.lastListenerInfo.push({a : a, b : b , c : c});
};

Every anchor element (a) now has a lastListenerInfo property that lists all of the listeners it has. It even works with anonymous functions to remove listeners.

Answered by Ivan Castellanos

Post is based on https://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node-in-javascript-or-in-debugging