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,520 points
128,535 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! 

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.

answered Jun 8, 2020 by Niroj
• 82,840 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,840 points
1,378 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,840 points
2,192 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,840 points
1,022 views
+1 vote
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,840 points
25,879 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,840 points
23,040 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,840 points
3,008 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,840 points
2,930 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,840 points
44,833 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,840 points
989 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP