javascript Chrome Dev Tools：查看页面中使用的所有事件监听器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28366849/
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
Chrome Dev Tools : view all event listeners used in the page
提问by bhavya_w
Is there a feature in chrome dev tools(or any extension) by which I can view all the event listeners that are used on a certain page/app.
chrome 开发工具（或任何扩展程序）中是否有一项功能，我可以通过它查看某个页面/应用程序上使用的所有事件侦听器。
Edit:
Its certainly not a duplicate of this question : How do I view events fired on an element in Chrome DevTools?
编辑：
它当然不是这个问题的重复：如何查看在 Chrome DevTools 中的元素上触发的事件？
The above questionexplains how to look for a particular event that gets fired when we interact with our app ( I am aware of how to do that!).
在上述问题解释了如何查找，当我们相互作用与我们的应用程序，都会激发一个特定事件（我知道如何做到这一点！）。
What I am looking foris the List of all the eventsthat we are listening to in the app and which DOM elements they are attached to.
什么我找的是所有事件的列表，我们听着应用程序和DOM元素它们附着。
回答by Mr.Raindrop
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 Qasim
Chrome Dev-Tools don't properly show jQuery-added event-listeners.
Chrome 开发工具无法正确显示 jQuery 添加的事件侦听器。
This library seems to cover this: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/
这个库似乎涵盖了这个：https: //blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/
Finding event handlers registered using jQuery can be tricky. findHandlersJS makes finding them easy, all you need is the event type and a jQuery selector for the elements where the events might originate.
查找使用 jQuery 注册的事件处理程序可能很棘手。findHandlersJS 使查找它们变得容易，您只需要事件类型和事件可能起源的元素的 jQuery 选择器。
