Мониторинг событий в консоли JavaScript

1. getEventListeners ()
2. monitorEvents ()
3. Некоторые полезные ресурсы, используемые для исследования в этой статье:

Одна из проблем, с которой сталкивается каждый веб-разработчик, - это добавление новых и инновационных функций в свои проекты. JavaScript является основным инструментом для достижения этой цели, но иногда нам нужны дополнительные инструменты для ускорения процесса разработки. Часто при работе с элементами формы мы хотим прикрепить действия к различным событиям. Однако, когда мы создаем эти обработчики событий, многие вещи могут пойти не так, и обычно тратится много времени на отладку проблем, связанных с обработчиками событий и связанными с ними действиями или обратными вызовами. Инструменты разработчика Chrome дает нам некоторую удобную функциональность, чтобы помочь с мониторингом этих событий в консоли JavaScript. Все подключенные прослушиватели событий можно увидеть на вкладке «Элементы» Chrome DevTools на вкладке «Прослушиватели событий» в правом окне. Это чрезвычайно полезно, поскольку в нем перечислены все события и связанные с ними обратные вызовы. К сожалению, это дает чрезмерное количество информации и не всегда легко ориентироваться.

Войдите в консоль JavaScript. Консоль JavaScript предоставляет несколько инструментов и ярлыков, которые помогут нам отладить эти проблемы.

Одним из них является ярлык $ (). Распространенной ошибкой считается, что это означает, что jQuery доступен для нас в консоли, но это не так, если только он не загружен на странице, которую мы просматриваем. $ () является псевдонимом для document.querySelectorAll (). Это позволяет нам возвращать массив элементов на основе селектора CSS.

getEventListeners ()

Функция getEventListeners () может быть запущена для элемента, и прикрепленные прослушиватели событий будут возвращены как объекты, которые вы можете раскрыть.

getEventListeners ($ («# myElement») [0]);

monitorEvents ()

После запуска monitorEvents () запишет объект события и все связанные с ним данные в консоль при запуске события. Вы можете сузить вывод несколькими способами, потому что он может стать многословным довольно быстро.

monitorEvents ($ («# myElement») [0]);

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

monitorEvents ($ («# myElement») [0], «клик»);

Массив нескольких событий также приемлем.

monitorEvents ($ («# myElement») [0], [«click», «blur», «focus»]);

Второй параметр также может относиться к семейству событий:

• «Мышь» включает в себя [«mousedown», «mousedown», «click», «dblclick», «mousemove», «mouseover», «mouseout», «mousewheel»]
• «Key» включает в себя [«keyup», «keydown», «нажатие клавиши», «textInput»]
• «Touch» включает в себя [«touchstart», «touchmove», «touchend», «touchcancel»]
• «Контроль» включает в себя [«изменить размер», «прокрутить», «увеличить», «фокус», «размытие», «выбрать», «изменить», «отправить», «сброс»]
• Если второй параметр не указан, вы получите здесь список всех семейств событий, в дополнение к следующему: [«загрузить», «выгрузить», «прервать», «ошибка», «выбрать», «изменить», «отправить» »,« Сброс »,« фокус »,« размытие »,« изменение размера »,« прокрутка »,« поиск »,« движение устройства »,« ориентация устройства »]

На изображении выше показано, как вызывается метод monitorEvents (), за которым следует событие click для указанного элемента. Вы можете видеть, что объект события имеет много данных, связанных с действием. Гораздо больше, чем видно на этом скриншоте.

Вы можете отписаться от этого мониторинга событий с помощью команды unmonitorEvents (), используя те же параметры, что и при первоначальном вызове.

unmonitorEvents ($ («# myElement») [0]);

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

Некоторые полезные ресурсы, используемые для исследования в этой статье:

Я основал Oomph, как это было много лун назад, в 2006 году. Моя главная задача в качестве генерального директора - убедиться, что Oomph - это отличное место для работы, определить видение и цели для будущего компании, а также поддержать команду, чтобы мы были там. , Я также люблю узнавать и разрабатывать стратегии с нашими клиентами и видеть положительное влияние технологий на их бизнес. Подробнее о Крис Мюррей

Похожие