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

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.


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.


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:

3249

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.

Tags:

Javascript