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

Question

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

есть ли способ просмотреть, какие функции / код прикреплены к любому событию для элемента DOM? С помощью Firebug или любой другой инструмент.

558 6

javascript events

6 ответов:

Comments

Ничего не найдено.

bobince · Accepted Answer · 2010-04-12 18:48:00

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

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

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

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

tuxtitlan · Accepted Answer · 2017-07-17 08:57:01

The панель элементов в Google Chrome Developer tools это было с выпусками Chrome в середине 2011 года и выпусками Chrome developer channel с 2010 года.

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

нажмите команда + опции + Я на Mac OSX и Ctrl + Shift + Я на Windows, чтобы запустить это в Chrome

mhenry1384 · Accepted Answer · 2011-05-05 16:44:12

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

Medlock Perlman · Accepted Answer · 2014-05-12 19:51:11

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

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

GFargo · Accepted Answer · 2017-06-24 22:18:55

Chrome Dev Tools недавно анонсированы некоторые новые инструменты для Мониторинг Событий JavaScript.

TL; DR

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

использовать unmonitorEvents() перестать слушать.

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

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

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

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

getEventListeners(window)

getEventListeners(document)

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

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

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

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

Rolf · Accepted Answer · 2016-01-17 15:40:42

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

просто ради иллюстрации (непроверенный код) - это пример того, как вы бы 'обернуть' 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);
}