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

0 votes

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?

Jun 8, 2020 in Java-Script by kartik
• 37,490 points
7,020 views

1 answer to this question.

0 votes

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.

image

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

image

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

image

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.

image

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.

image

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

image

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

Click on the {} icon to format the code.

image

Hope it helps!

answered Jun 8, 2020 by Niroj
• 82,560 points

Related Questions In Java-Script

0 votes
1 answer

How to get the file name from a full path using JavaScript?

Hello @kartik, Use this: var filename = fullPath.replace(/^.*[\\\/]/, '') This ...READ MORE

answered Sep 2, 2020 in Java-Script by Niroj
• 82,560 points
150 views
0 votes
1 answer

How to remove all child elements of a DOM node in JavaScript?

Hello @kartik, Use modern Javascript, with remove! const parent = ...READ MORE

answered Sep 21, 2020 in Java-Script by Niroj
• 82,560 points
348 views
0 votes
1 answer

How to list the properties of a JavaScript object?

Hii @kartik, Use Reflect.ownKeys(): var obj = {a: 1, b: ...READ MORE

answered Jun 8, 2020 in Java-Script by Niroj
• 82,560 points
140 views
0 votes
1 answer

How to delete a localStorage item when the browser window/tab is closed?

Hii @kartik, You can make use of the beforeunload event ...READ MORE

answered Jun 11, 2020 in Java-Script by Niroj
• 82,560 points
813 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,560 points
5,578 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,560 points
646 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,560 points
495 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,560 points
6,177 views
0 votes
1 answer

How to implement useEffect() so the list on the front page updates only when a name change has been detected?

Hello @kartik, Instead of passing the entire object ...READ MORE

answered Jun 1, 2020 in Java-Script by Niroj
• 82,560 points
133 views