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

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

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

Инструменты разработчика Chrome

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

$ ()

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

getEventListeners ()

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

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

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»]
  • «Контроль» включает в себя [«изменить размер», «прокрутить», «увеличить», «фокус», «размытие», «выбрать», «изменить», «отправить», «сброс»]
  • Если второй параметр не указан, вы получите здесь список всех семейств событий, в дополнение к следующему: [«загрузить», «выгрузить», «прервать», «ошибка», «выбрать», «изменить», «отправить» »,« Сброс »,« фокус »,« размытие »,« изменение размера »,« прокрутка »,« поиск »,« движение устройства »,« ориентация устройства »]

«Мышь» включает в себя [«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 - это отличное место для работы, определить видение и цели для будущего компании, а также поддержать команду, чтобы мы были там. , Я также люблю узнавать и разрабатывать стратегии с нашими клиентами и видеть положительное влияние технологий на их бизнес. Подробнее о Крис Мюррей

Похожие

Мониторинг .NET с использованием Foglight 5.6.7 и .Net Agent 5.9.2
... вет Голан, Да, я перезапустил IIS на хосте .net. и у меня установлены две программы (как вы сказали), у меня тоже есть сервис. Однако на стороне Foglight у меня нет агента транзакции ... только один для счетчика. Пожалуйста, смотрите эти скриншоты:
10 лучших расширений фотогалереи для Joomla!
Лучшие бесплатные галереи модулей и плагинов для Joomla
... для любого использования. В этой статье мы собрали Лучшие бесплатные галереи модулей и плагинов для Joomla которые лучше всего рассмотрены в каталоге расширений Joomla. Давайте выберем тот, который вам нравится, и добавим на ваш сайт. Они абсолютно бесплатны и просты в использовании. 1.
Карта Java - javatpoint
Карта содержит значения на основе ключа, то есть пары ключ и значение. Каждая пара ключ-значение называется записью. Карта содержит уникальные ключи. Карта полезна, если вам нужно искать, обновлять или удалять элементы на основе ключа. Иерархия карт Java Существует два интерфейса для реализации Map в java: Map и SortedMap и три класса: HashMap, LinkedHashMap и TreeMap. Иерархия Java Map приведена ниже: