How to use getEventListeners in Chrome Dev Tool?

Question

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.

Answer 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

Answer 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.