22

I still can't belive this is not possible but is there a way to loop through the dom and see all event handlers attached using 'addEventListener'. This post and many others says no.

If that's the case then how do apps like Chrome's inspector or Firebug show them, which they do? I guess they probably augment the dom's methods in some way so they can track what's being bound.

Community
  • 1
  • 1
screenm0nkey
  • 18,405
  • 17
  • 57
  • 75
  • Where do you see Chrome or Firebug display event listeners? – Steve H. Jun 07 '12 at 21:32
  • Yeah, I would love to know where you see them too! I've downloaded plugins for Firebug that show them, but you're probably right that they somehow track any event listeners when they are bound – Ian Jun 07 '12 at 21:37
  • 1
    In chrome web inspector click on the 'elements' tab at the top. it's the one furthest tp the left. Select an element in the dom and then on the right hand side there is a list of information about the element you have selected like Styles, Properties etc. The last in the list is Event Listeners and it give you all the information you need. But You can only see the info for each element selected, not the entire DOM. Hense me asking the question:) – screenm0nkey Jun 08 '12 at 06:23

4 Answers4

35

The console of Chrome has a method that can help you check if a dom node has any event listeners registered; for example to check event listeners attached to the document node using:

https://developers.google.com/chrome-developer-tools/docs/commandline-api#geteventlistenersobject

getEventListeners(document);

If needed, you could recursively iterate over all dom nodes and find all event handlers attached.

Erçin Dedeoğlu
  • 4,950
  • 4
  • 49
  • 69
Emil A.
  • 3,387
  • 4
  • 29
  • 46
  • 3
    getEventListeners(myDomElement) works in the Chromium v.25 developer tools console, but in actual code it throws an error. – Robin like the bird Mar 12 '14 at 19:57
  • 1
    @Robinlikethebird yes, `getEventListeners ` is a method that chrome devtools console provide, I am looking for a method that can find events bound to dom at runtime. for now, I just find jquery method `$.data(element, 'events')`. I am looking for a plain javascript or DOM way. – Lin Du May 11 '17 at 04:20
  • Also works in Edge Chromium nowadays – Denis G. Labrecque Mar 21 '22 at 13:07
6

Of course browsers internally have a list of event listeners, but it is not exposed to page-level JavaScript. For example, Firebug (or Eventbug) probably use nsIEventListenerInfo.

That being said, this old answer still holds:
How to find event listeners on a DOM node?

Community
  • 1
  • 1
user123444555621
  • 148,182
  • 27
  • 114
  • 126
0

On Chrome v53 console I tried:

getEventListeners(document);

that returns:

__proto__: Object

and sub elements, not what I'm looking for.

So I've tried:

getEventListeners(window);

that returns

Object {beforeunload: Array[1], load: Array[1]}

That is what I'm looking for. So I think that the correct approach is:

getEventListeners(myDomElement):

where myDomElement is the targeted object got with standard ways like getElementById etc...

ksysha
  • 312
  • 6
  • 8
willy wonka
  • 1,440
  • 1
  • 18
  • 31
  • "the correct approach is the Robin like the bird's way" what's this supposed to mean? – Neutrino Jul 14 '20 at 08:42
  • @Neutrino ops... sorry I had something into the clipboard I pasted here for mistake without even realizing it. I've corrected the phrase. Thanks for the notice. – willy wonka Mar 12 '21 at 19:22
0

use the following function to fetch the json of registered events;

getEventListeners(node_name); where node_name can be an element name or its id.

A. Meshu
  • 4,053
  • 2
  • 20
  • 34
Harshit Garg
  • 2,137
  • 21
  • 23