Как узнать, сколько прослушивателей событий на странице

Я создаю довольно большое приложение в Javascript. Это единственная страница, которая может изменять разные виды. Все представления имеют свои собственные переменные, события, слушатели, элементы и т.д.

При работе с большими коллекциями и несколькими событиями иногда бывает полезно узнать, что именно происходит на странице.

Я знаю, что у всех браузеров есть инструменты для разработчиков, но иногда трудно щелкнуть по всем элементам и т.д. И некоторые параметры, которые я не могу найти.

Меня интересует только то, сколько событий на данный момент прослушивается на этой странице. Таким образом, я могу подтвердить, что я не создаю зомби.

Если решение является инструментом разработчика, сообщите мне, где искать и что делать. И самое главное, какой браузер выбрать.

Ответы

Ответ 1

Лучший способ сделать это в Chrome - использовать getEventListeners, который является частью API devtools. (Примечание: это доступно только разработчику в devtools, но не доступно обычному скрипту на странице.)

Вы можете использовать document.querySelectorAll('*') чтобы захватить все элементы на странице и запустить каждый из них через getEventListeners чтобы получить их прослушиватели событий. В другом ответе г-на Райндропа есть несколько предложений и подходов, как это сделать на практике.

Ответ 2

Просто используйте API getEventListeners, чтобы получить всю информацию о событиях. См. Ссылку Chrome Dev Tools: просмотр всех прослушивателей событий, используемых на странице

Содержание этого ответа:

Chrome Devtool не может этого сделать для вас. Но вы можете проверить их на консоли с помощью хром API: getEventListeners

Просто поместите этот код в свою консоль dev-tool, вы можете получить весь номер события привязки кликов на своей странице:

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. Просто импровизируйте.