Перевірте додані обробники подій на предмет будь-якого елемента DOM

Чи є спосіб переглянути, які функції / код додаються до будь-якої події для елемента DOM? Використання Firebug або будь-якого іншого інструменту.

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

Обробники подій, приєднані за допомогою addEventListenerметодів подій DOM рівня 2 та IE, attachEventнаразі не можуть бути вилучені із сценарію. Колись DOM рівня 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 = обробник), переглянувши 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);
}