CODEWITHSUNDEEP
javascriptdomgoogle-chrome-devtoolsdom-events
HP.
HP.

Reputation: 19896

How to use getEventListeners in Chrome Dev Tool?

I tried to trace back which function hooked into a click event of .someclass. I open Chrome Dev Tool and type this

getEventListeners(document.querySelector('.someclass'));

The result is this

Object {}

I cannot click and open it to find out the name of the object or the source code that handle click event.

Is there a way to find out?

UPDATE 1:

Followed Krasimir's advise below. There could be only two events: mousemove or mouseover. So how do I find out the exact function handling that event for canvas.overlay? There are just too many to drill down into.

enter image description here

Upvotes: 18

Views: 53542

Answers (3)

Konrad Dzwinel
Konrad Dzwinel

Reputation: 37903

You are getting an empty object when calling

getEventListeners(document.querySelector('.someclass'));

probably because the listener isn't hooked up to .someclass element itself (direct event), but to one of it's ancestors (delegated event). There is a good explanation of this here.

You can list both delegated and direct events by calling getEventListeners for specified node and all it's ancestors. This function should do the trick:

getAllEventListeners = function(el) {
 var allListeners = {}, listeners;

 while(el) {
  listeners = getEventListeners(el);

  for(event in listeners) {
   allListeners[event] = allListeners[event] || [];
   allListeners[event].push({listener: listeners[event], element: el});  
  }

  el = el.parentNode;
 }

 return allListeners;
}

However, this will output exactly the same thing as the "Event Listeners" tab (with "Filter" option set to "All nodes") that Krasimir mentioned in his answer.

Upvotes: 18

Sean Chen
Sean Chen

Reputation: 99

I guess you are using jQuery to bind the events to that element. That's why you can't see the actual handler code in the drill down menu. Without wrapped by jQuery, the actual code should be displayed in "listenerBody" like this:

enter image description here

Upvotes: 2

Krasimir
Krasimir

Reputation: 13529

  1. Open the DevTools
  2. Open the Elements tab and locate your element (.someclass)
  3. There are four tabs per element - Styles, Properties, DOM Breakpoints and Event Listeners
  4. Select Event Listeners

enter image description here

Upvotes: 23

Related Questions