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 res

Solution 1:

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

Solution 2:

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.

Solution 3:

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: