javascript 如何知道页面上有多少事件侦听器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10284120/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to know how many event listeners there are on the page
提问by Saif Bechan
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.
我正在用 Javascript 构建一个相当大的应用程序。它是可以更改不同视图的单个页面。所有视图都有自己的变量、事件、侦听器、元素等。
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.
如果解决方案是开发人员工具，请告诉我在哪里查看和做什么。最重要的是，选择哪个浏览器。
采纳答案by apsillers
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.)
在 Chrome 中执行此操作的最佳方法是使用getEventListeners，它是 devtools API 的一部分。（注意：这只能由开发人员在 devtools 中访问，页面中的普通脚本无法访问。）
You can use document.querySelectorAll('*')to grab all elements on a page, and run them each through getEventListenersto get their event listeners. Another answer by Mr.Raindrophas several suggestions and approaches of how to do this in practice.
您可以使用document.querySelectorAll('*')获取页面上的所有元素，并逐个运行它们getEventListeners以获取它们的事件侦听器。Mr.Raindrop 的另一个回答对如何在实践中做到这一点提出了一些建议和方法。
回答by Mr.Raindrop
Just use the API getEventListenersto get all the events' info. See this link Chrome Dev Tools : view all event listeners used in the page
只需使用 APIgetEventListeners即可获取所有事件的信息。请参阅此链接Chrome Dev Tools：查看页面中使用的所有事件侦听器
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
Chrome Devtool 无法为您执行此操作。但是您可以使用 chrome 提供的 API 检查控制台中的那些：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.
您可以从这个 API 中获得许多其他信息。只是即兴发挥。
回答by Leo
You can monitor events in Chrome Developer Tools using the monitorEvents function. See http://www.briangrinstead.com/blog/chrome-developer-tools-monitoreventsfor all the details.
您可以使用 monitorEvents 函数在 Chrome 开发者工具中监控事件。有关所有详细信息，请参阅http://www.briangrinstead.com/blog/chrome-developer-tools-monitorevents。
