Как выявить обработчики событий на узле DOM в JavaScript во время отладки?

Оффтоп javascript
1

У меня есть страница, на которой к полям ввода и выпадающим спискам прикреплены обработчики событий. Как можно выяснить, какие именно обработчики прикреплены к конкретному узлу DOM и на какие события они реагируют?

Обработчики можно добавлять следующими способами:

  1. Через метод addEventListener;
  2. Устанавливая значение свойства element.onclick;
  3. Используя сторонние JavaScript библиотеки.

Вот пример того, как это выглядит:

const inputElement = document.getElementById('userInput');
const dropdownElement = document.querySelector('.dropdown');

// Первый вариант
inputElement.addEventListener('keyup', onKeyPress);

// Второй вариант
dropdownElement.onchange = onSelectionChange;

function onKeyPress(event) {
    console.log('Клавиша была нажата');
}

function onSelectionChange(event) {
    console.log('Выбор изменен');
}

Есть ли способ узнать все назначенные обработчики через программный код или инструменты разработчика?

2

Если ты работаешь с jQuery, то можно использовать $._data(element, 'events'), чтобы увидеть все события. Многие библиотеки имеют свои инструменты для отладки. Скажи, какой фреймворк ты используешь? Это может помочь сузить ответ.

3

для программной проверки попробуй element.onclick, element.onchange и другие свойства - если обработчик назначен вторым способом, там будет функция. С addEventListener сложнее, браузер их не всегда показывает.

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

4

В Chrome DevTools выбери элемент в инспекторе и открой вкладку Event Listeners. Там увидишь все события и обработчики, включая те, что добавлены через библиотеки.

В консоли можешь использовать getEventListeners(element) — покажет все слушатели для элемента. Правда, работает только в консоли DevTools.