如何知道页面上有多少个事件监听器

Question

我正在使用Javascript构建一个相当大的应用程序.它是一个可以更改不同视图的单个页面.所有视图都有自己的变量,事件,监听器,元素等.

在处理大型集合和多个事件时,有时可以很好地了解页面上发生了什么.

我知道所有浏览器都有开发人员工具,但有时很难点击所有元素等等.我找不到一些选项.

我感兴趣的一件事是知道当前在页面上收听了多少事件.通过这种方式,我可以确认我没有创建僵尸.

如果溶剂是开发人员工具,请告诉我在哪里查看和做什么.最重要的是,选择哪种浏览器.

Answer 1

只需使用API getEventListeners即可获取所有活动的信息.查看此链接Chrome开发者工具:查看页面中使用的所有事件监听器

这个答案的内容:

Chrome Devtool无法为您完成此操作.但您可以使用API​​ chrome检查控制台中的那些:getEventListeners

只需将此代码放入您的开发工具控制台,您就可以获得页面中所有绑定点击事件编号:

Array.from(document.querySelectorAll('*'))
  .reduce(function(pre, dom){
    var clks = getEventListeners(dom).click;
    pre += clks ? clks.length || 0 : 0;
    return pre
  }, 0)

结果是这样的:

3249

那里有很多点击绑定.绝对不是性能项目的好例子.

如果您想查看页面中所有元素中绑定了哪些事件以及每个事件的侦听器数量,只需将这些代码放入开发工具控制台:

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
  }, {})

结果是这样的:

{
  touchstart: 6,
  error: 2,
  click: 3249,
  longpress: 2997,
  tap: 2997,
  touchmove: 4,
  touchend: 4,
  touchcancel: 4,
  load: 1
}

您可以从此API获得许多其他信息.只是即兴发挥.

Answer 2

在Chrome中执行此操作的最佳方法是使用getEventListeners,这是devtools API的一部分.(注意:这只能由devtools中的开发人员访问,页面中的普通脚本无法访问.)

您可以使用document.querySelectorAll('*')抓取页面上的所有元素,并逐个运行它们getEventListeners以获取其事件侦听器.雷恩波特先生的另一个答案有几个建议和方法,如何在实践中做到这一点.

Answer 3

您可以使用monitorEvents函数在Chrome开发者工具中监视事件。有关所有详细信息，请参见http://www.briangrinstead.com/blog/chrome-developer-tools-monitorevents。