How to know how many event listeners there are on the page
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.
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.
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.
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.
