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

Question

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

在处理大型集合和多个事件时，有时最好了解页面上到底发生了什么。

我知道所有浏览器都有开发者工具，但有时很难点击所有元素等。还有一些选项我找不到。

我感兴趣的一件事是了解当前在页面上监听了多少事件。这样我就可以确认我没有在制造僵尸。

如果解决方案是开发人员工具，请告诉我在哪里查看以及如何操作。最重要的是，选择哪种浏览器。

Answer 1

只需使用 API getEventListeners 即可获取所有事件的信息。请参阅此链接 Chrome Dev Tools : view all event listeners used in the page

The content of this answer:

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

只需将此代码放在开发工具的控制台中，您就可以获取页面中所有绑定(bind)的点击事件数:

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

结果是这样的:

3249

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

如果您想查看页面中的所有元素都绑定(bind)了哪些事件以及每个事件有多少监听器，只需将这些代码放入开发工具的控制台中即可:

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 获得许多其他信息。即兴创作。