Осмотреть прикрепленные обработчики событий для любого элемента DOM

Ответ 1

Обработчики событий, прикрепленные с использованием традиционных element.onclick= handler или HTML <element onclick="handler">, могут быть получены тривиально из свойства element.onclick из script или внутри отладчика.

Обработчики событий, подключенные с использованием методов DOM Level 2 Events addEventListener и IE attachEvent, в настоящее время не могут быть извлечены из script вообще. DOM Level 3, когда-то предлагаемый element.eventListenerList, чтобы получить всех слушателей, но неясно, приведет ли это к окончательной спецификации. Сегодня в браузере нет реализации.

Средство отладки в качестве расширения браузера может получить доступ к этим типам прослушивателей, но я не знаю, что на самом деле делать.

Некоторые JS-фреймворки оставляют достаточно записи привязки событий для определения того, что они делали. Visual Event использует этот подход для обнаружения слушателей, зарегистрированных через несколько популярных фреймворков.

Ответ 2

Элементная панель в инструментах разработчика Google Chrome имеет это начиная с выпусков Chrome в середине 2011 года и выпусков канала разработчиков Chrome с 2010 года.

Кроме того, прослушиватели событий, показанные для выбранного node, в том порядке, в котором они запускаются, через фазы захвата и барботажа.

Нажмите command + option + i на Mac OSX и Ctrl + Shift + i в Windows, чтобы запустить его в Chrome

Ответ 3

Вы можете просматривать непосредственно прикрепленные события (element.onclick = обработчик), просматривая DOM. Вы можете просматривать события, связанные с jQuery, в Firefox, используя FireBug с FireQuery. Кажется, что нет никакого способа увидеть события, добавленные addEventListener, используя FireBug. Однако вы можете увидеть их в Chrome с помощью отладчика Chrome.

Ответ 4

Вы можете использовать Visual Event от Allan Jardine для проверки всех подключенных обработчиков событий из нескольких основных библиотек JavaScript на вашей странице. Он работает с jQuery, YUI и несколькими другими.

Visual Event - это букмарклет JavaScript, поэтому он совместим со всеми основными браузерами.

Ответ 5

Chrome Dev Tools недавно анонсировал несколько новых инструментов для Контроль событий JavaScript.

TL; DR

Слушайте события определенного типа с помощью monitorEvents().

Используйте unmonitorEvents(), чтобы остановить прослушивание.

Получить прослушиватели элемента DOM с помощью getEventListeners().

Используйте панель инспектора прослушивателей событий, чтобы получить информацию о прослушивателях событий.

Поиск пользовательских событий

Для моей потребности, обнаружения пользовательских событий JS в стороннем коде, следующие две версии getEventListeners() были удивительно полезны;

• getEventListeners(window)
• getEventListeners(document)

Если вы знаете, что DOM Node был подключен к прослушивателю событий, вы должны передать это вместо window или document.

Известное событие

Если вы знаете, какое событие вы хотите отслеживать, например. click в теле документа вы можете использовать следующее: monitorEvents(document.body, 'click');.

Теперь вы должны увидеть, как все события кликов на document.body регистрируются в консоли.

Ответ 6

Вы можете расширить среду javascript, чтобы отслеживать прослушиватели событий. Оберните (или "перегрузите" ) собственный метод addEventListener() с помощью некоторого кода, который может сохранить запись любого прослушивателя событий, добавленного с этого момента. Вам также нужно будет расширить HTMLElement.prototype.removeEventListener, чтобы вести записи, которые точно отражают то, что происходит в DOM.

Просто для иллюстрации (непроверенный код) - это пример того, как вы будете "wrap" addEventListener иметь записи зарегистрированных зарегистрированных слушателей на самом объекте:

var nativeMethod = HTMLElement.prototype.addEventListener;
HTMLElement.prototype.addEventListener = function (type, listener) {
   var el = e.currentTarget;
   if(!(el.eventListeners instanceof Array)) { el.eventListeners = []}
   el.eventListeners.push({'type':type, 'listener':listener});
   nativeMethod.call(el, type, listener);
}