How to find event listeners on a DOM node using JavaScript

21
votes

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.

4
javascript
Where do you see Chrome or Firebug display event listeners? - Steve H.
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
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

4 Answers

6
votes

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?

34
votes

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 use:

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

getEventListeners(document);

You could recursively iterate over all dom nodes and find all event handlers attached if needed.

0
votes

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.

0
votes

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