Як я бачу події, запущені на елементі в Chrome DevTools?

У мене на сторінці бібліотеки є налаштований елемент форми на сторінці. Я хочу побачити, які дії Javascript запускаються під час взаємодії з ним, оскільки я намагаюся з’ясувати, який обробник подій використовувати.

Як це зробити за допомогою веб-розробника Chrome?

• Натисніть, F12щоб відкрити Dev Tools
• Перейдіть на вкладку Джерела
• Праворуч прокрутіть униз до пункту «Точки переривання слухача подій» та розгорніть дерево
• Клацніть на події, які ви хочете слухати.
• Взаємодійте з цільовим елементом, якщо вони стрілять, ви отримаєте точку злому в налагоджувачі

Аналогічно, ви можете клацнути правою кнопкою миші на цільовому елементі -> вибрати "перевірити елемент" Прокрутіть вниз праворуч рамку розробника, внизу - "слухачі подій". Розгорніть дерево, щоб побачити, які події додаються до елемента. Не впевнений, чи це працює для подій, які обробляються через барботаж (я здогадуюсь, ні)

Ви можете використовувати функцію monitorEvents .

Просто огляньте свій елемент ( right mouse click→ Inspectна видимому елементі або перейдіть на Elementsвкладку в Інструментах для розробників Chrome і виберіть потрібний елемент), а потім перейдіть на Consoleвкладку та напишіть:

monitorEvents($0)

Тепер, коли ви переместите курсор миші на цей елемент, сфокусуйте його або натисніть на нього, ім'я запущеної події відобразиться разом із його даними.

Щоб перестати отримувати ці дані, просто напишіть це на консоль:

unmonitorEvents($0)

$0- це лише останній елемент DOM, обраний Інструментами розробників Chrome. Ви можете передати туди будь-який інший об’єкт DOM (наприклад, результат getElementByIdабо querySelector).

Ви також можете вказати тип "події" як другий параметр, щоб звузити спостережувані події до деякого заздалегідь заданого набору. Наприклад:

monitorEvents(document.body, 'mouse')

Список доступних типів тут .

Я зробив невеликий gif, який ілюструє, як працює ця функція:

Visual Event - це приємна маленька закладка, яку ви можете використовувати для перегляду обробників подій елемента. Демонстрацію в Інтернеті можна переглянути тут .

Для jQuery (принаймні версія 1.11.2) для мене працювала наступна процедура.

1. Клацніть правою кнопкою миші елемент та відкрийте "Інструменти для розробників Chrome"
2. Введіть $._data(($0), 'events');"Консоль"
3. Розгорніть додані об’єкти та двічі клацніть handler:значення.
4. Це показує вихідний код доданої функції, шукайте її частину на вкладці "Пошук".

І настав час перестати винаходити колесо і почати використовувати події ванілі JS ... :)

Це не відображатиме власні події, як ті, які може створити ваш сценарій, якщо це плагін jquery. наприклад :

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

Панель подій у розділі "Сценарії" в інструментах для розробників хрому не відображатиметься "Щось: користувальницька подія-одна"