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.