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

Question

I have a page where some event listeners are attached to input boxes and select boxes. 

Events are attached using:

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

Is there a way to find out which event listeners are observing a particular DOM node and for what event?

Answer 1

Hii @kartik,

It is possible to list all event listeners in JavaScript. You just have to hack the prototype's method of the HTML elements (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});
};

Now every anchor element (a) will have a lastListenerInfo property wich contains all of its listeners. And it even works for removing listeners with anonymous functions.

Another method

This solution will work only on Google Chrome or Chromium-based browsers.

We are going to use this website as an example.

Let’s say you wanted to find all the event listeners attached to the search icon DOM element.

Right-click on the search icon button and choose “inspect” to open the Chrome developer tools.

Once the dev tools are open, switch to the “Event Listeners” tab and you will see all the event listeners bound to the element.

You can expand any event listener by clicking the right-pointing arrowhead.

When you expand an event listener and hover over the element, the “remove” button will appear. It can be used to delete the event listener.

Clicking on the filename main.min.js:6 takes you directly to the event listener callback function source by automatically switching you to the “sources” tab.

As you can see in the screenshot below, you have been taken to the exact location of the event listener callback function.

We can’t see the event listener code properly right now since the code is minified.

Click on the {} icon to format the code.

Hope it helps! 

In any case if you need to know more about Javascript code, then enroll with our Java certification course and learn from the top level instructors.