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

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

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

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

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

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

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

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

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

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входе в консоль.

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

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

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

Вы можете расширить свою среду javascript, чтобы отслеживать слушателей событий. Оберните (или «перегрузите») собственный метод addEventListener () с помощью некоторого кода, который может вести запись о любом прослушивателе событий, добавленном с этого момента . Вам также придется расширить HTMLElement.prototype.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);
}