How to know how many event listeners there are on the page

Question

I am building a fairly large application in Javascript. It is a single page that can change different views. All the views have their own variables, events, listeners, elements, etc.

When working with large collections and multiple events it's sometimes good to know what exactly is happening on the page.

I know all the browsers have developer tools, but sometimes it's hard to click trough all the elements etc. And some options I can not find.

One thing I am interested in is to know how many events there currently listened for on the page. This way I can confirm that I am not creating zombies.

If the sollution is a developer tool, please let me know where to look and what to do. And most important, which browser to choose.

Check out this question: http://stackoverflow.com/q/446892/206403 — gen_Eric, Apr 23 '12 at 16:11
This answer by [Andrew Hedges][1] might help you. [1]: http://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node — luso, Apr 23 '12 at 16:11
@luso: When posting comments, the markdown syntax is slightly different (click the "help" button to the right of the textbox). — gen_Eric, Apr 23 '12 at 16:12
Thank you Rocket. It is actually a "trivial answer converted to comment" by the system. — luso, Apr 23 '12 at 16:14

score 32 · Answer 1 · answered Aug 23 '17 at 14:32

Just use the API getEventListeners to get all the events' info. See this link Chrome Dev Tools : view all event listeners used in the page

The content of this answer:

The Chrome Devtool can't do this for you. But you can inspect those in your console with the API chrome gives: getEventListeners

Just put this code in your dev-tool's console, you can get all the binding click events number in your page:

Array.from(document.querySelectorAll('*'))
  .reduce(function(pre, dom){
    var clks = getEventListeners(dom).click;
    pre += clks ? clks.length || 0 : 0;
    return pre
  }, 0)

The result is like this:

That was a lot of click binding there. Definitely not a good example of project for performance.

If you want see what events have been bound in all your elements in your page and how many of the listeners of each of the events, just put these codes in your dev-tool's console:

Array.from(document.querySelectorAll('*'))
  .reduce(function(pre, dom){
    var evtObj = getEventListeners(dom)
    Object.keys(evtObj).forEach(function (evt) {
      if (typeof pre[evt] === 'undefined') {
        pre[evt] = 0
      }
      pre[evt] += evtObj[evt].length
    })
    return pre
  }, {})

The result is like this:

{
  touchstart: 6,
  error: 2,
  click: 3249,
  longpress: 2997,
  tap: 2997,
  touchmove: 4,
  touchend: 4,
  touchcancel: 4,
  load: 1
}

And so many other info you can get from this API. Just improvise.

score 16 · Accepted Answer · edited Jan 12 '21 at 06:22

16

The best way to do this in Chrome is to use getEventListeners, which is part of the devtools API. (Note: this is only accessible to a developer in devtools, not accessible to a normal script in a page.)

You can use document.querySelectorAll('*') to grab all elements on a page, and run them each through getEventListeners to get their event listeners. Another answer by Mr.Raindrop has several suggestions and approaches of how to do this in practice.

edited Jan 12 '21 at 06:22

Dennis Hackethal

13,662
12
66
115

answered Apr 23 '12 at 17:30

apsillers

112,806
17
235
239

Great, I like this approuch. Will this also catch custom events that I create with jQuery, for example `myVar.on('customEventxx', this.doSomething)`. – Saif Bechan Apr 23 '12 at 17:36
Yes, it does; I just tested. However, I've just realized a significant problem: removing elements from the DOM does not decrease `listenerCount`. If you add a listener to a node and then remove that node, the count doesn't go down. You could hook into `Node.removeChild`, but that doesn't handle removals by `innerHTML`. This might not be a problem for your situation, but I wanted to make you aware of it. – apsillers Apr 23 '12 at 18:36
Not an accurate answer since removeEventListener and addEventListener call counts may vary and set the variable into negative value. – HydraOrc Dec 10 '18 at 12:10
1

@HydraOrc This is definitely a terrible answer now, for both the reasons you and I have identified if the comments here, and because there is now a `getEventListeners` function (which didn't exist in 2012 when I wrote this). Unfortunately, I can't delete this because it's been accepted, but I can at least turn it into a pointer to the much better answer that uses `getEventListeners`. Thanks for bringing this to my attention! – apsillers Dec 10 '18 at 12:26

score 6 · Answer 3 · answered Apr 23 '12 at 17:35

6

You can monitor events in Chrome Developer Tools using the monitorEvents function. See http://www.briangrinstead.com/blog/chrome-developer-tools-monitorevents for all the details.

answered Apr 23 '12 at 17:35

Leo

5,069
2
20
27

How to know how many event listeners there are on the page

3 Answers3