Examine Event Listeners¶
The inspector shows the word “event” next to elements in the HTML Pane , that have event listeners bound to them:
Click the icon, then you’ll see a popup listing all the event listeners bound to this element:
Each line contains:
- a right-pointing arrowhead; click to expand the row and show the listener function source code
- the name of the event for which a handler was attached to this element
- the name and line number for the listener; you can also click here to expand the row and view the listener function source code
- a curved arrow pointing to a stack; click it to show the code for the handler in the debugger
- a label indicating whether the event bubbles
- a label indicating the system that defines the event. Firefox can display:
- standard DOM events
- jQuery events
- React events
Получаем список обработчиков элемента в DOM’е
Допустим, что у нас есть элемент на странице. Пусть это будет div . Наша задача — получить все обработчики этого элемента. Рассмотрим варианты решения этой задачи в различных браузерах, а именно IE , Firefox , Chrome . В каждом современном браузере в консоли разработчка есть специальный UI для этих целей. Например в Chrome это DevTools -> Elements -> Выбрать интересующий DOM узел -> Вкладка Event Listeners . В нашем случае, поговорим о получании списка обработчиков программно.
- Использовать метод getEventListeners(target) . В браузере Chrome (является методом DevTools API) этот метод работает без лишних телодвижений — возвращает объект-массив эвентов на целевом элементе.
- Ситуация с Firefox немного сложнее. Данный метод доступен после установки Firebug GetEventListeners.
- В IE все совсем плохо, т.к такой метод не реализован в API консоли разработчика и нет extensions с его аналогами (я таких не нашел).
Итак, мы выяснили, что метод getEventListeners не является кроссбраузерным и является частью Developer Console API, поэтому рассмотрим следующий костыль вариант решения. Для этого нам придется переопределить нативные методы Element.prototype.addEventListener и Element.prototype.removeEventListener (для старых версий IE нужно переопределить свои аналоги) своими кастомными реализациями которые будут отслеживать event listeners .
See the Pen RNzGwj by Alex Filatov (@greybax) on CodePen.
- Это единственный способ получить все обработчики событий (в том числе, зарегистрированные сторонними библиотеками, например, jQuery )
- Cкрипт, который выполняет переопределение, должен быть выполнен первым — до jQuery/Prototype/ и др., т.к иначе event listeners , зарегистрированные через эти сценарии будут не отражены.
Можно ничего не писать и использовать сторонние реализации функции, например эту.
Минусы:
- Плагин, в состоянии обнаружить и получить обработчики событий, зарегистрированные только через jQuery .
- Завязан на jQuery версии >=1.8.
Итог
Универсального (кроссбраузерного) и по-настоящему хорошего варианта, к сожалению, сейчас не существует.
Обзор Chrome DevTools. Решаем основные задачи разработчика
Мы продолжаем цикл статей об инструментах разработчика — Chrome DevTools. В первых двух частях мы уже познакомились с вкладками Elements, Console, Sources и Network и разобрались с их основными функциями.
Возможности Chrome DevTools огромны. Здесь можно изменять анимацию, проверять доступность, отлавливать ошибки, следить за производительностью сайта и выполнять многие другие задачи. Но на начальных этапах обучения веб-разработке необязательно разбираться со всеми функциями. Достаточно знать набор базовых инструментов, который понадобится для решения повседневных задач.
Давайте разберёмся, какие задачи можно решить с помощью Chrome DevTools
Посмотреть, как выглядит страница с телефона и планшета
При создании адаптивных сайтов или веб-приложений полезно знать, как выглядит страница на планшетах и мобильных устройствах. С помощью инструментов разработчика вы можете сделать это за несколько секунд. Нужно лишь открыть Chrome Devtools, а затем кликнуть на иконку Toggle device toolbar в левом углу или нажать комбинацию Ctrl+Shift+M.
Над страницей появится панель с режимами эмуляции из мобильных устройств и планшетов. По умолчанию панель инструментов открывается в режиме адаптивного окна просмотра. Чтобы изменить область до нужных размеров, задайте ширину или потяните за границы рабочей области. А если хотите увидеть, как страница отображается на конкретных устройствах, например, на iPhone 5, кликните на Responsive и выберите подходящий девайс.
На этой же панели есть ещё одна полезная кнопка — DPR (Device Pixel Ratio). С её помощью проверяют, как выглядят изображения на ретина-дисплеях — экранах с повышенной плотностью. Чтобы посмотреть, как выглядит графика на разных устройствах, измените значение DPR и обновите страницу.
Быстро изменить стили прямо на странице
Во время разработки удобно менять стили прямо в браузере. Например, чтобы проверить, как выглядит элемент с новыми CSS-правилами, или выровнять его при вёрстке под PixelPerfect.
Менять стили можно во вкладке Elements. Сначала выберите элемент, который хотите изменить. Для этого кликните по нему в дереве DOM или активируйте иконку выбора, а затем прямо на странице нажмите на этот элемент.
После этого в разделе Styles добавьте, удалите или поменяйте стилевые правила.
В разделе Styles также можно проверять, задавать и исправлять стилевые правила для :hover , :active , :focus и других псевдоклассов. Чтобы это сделать, выберите элемент, которому задано интерактивное состояние. Затем в разделе Styles нажмите на кнопку : hov, выберите подходящий псевдокласс и поменяйте его стили.
Протестировать блоки на переполнение
Во вкладке Elements можно редактировать не только стили, но и DOM-дерево: добавлять и удалять элементы или блоки, менять текст, управлять атрибутами и классами. Это очень удобно, особенно если нужно протестировать какую-то гипотезу или проверить ошибки в вёрстке.
Одна из задач, которую часто приходится выполнять разработчикам с помощью Chrome DevTools — протестировать вёрстку на переполнение. То есть проверить, как ведут себя блоки и элементы при добавлении контента или изменении размеров страницы. Например, вы можете посмотреть, не выходит ли текст за рамки блока или не выпадают ли элементы из общего потока.
Популярный среди разработчиков мем и заодно пример того, как не нужно делать: вёрстка не должна ломаться при добавлении новых элементов, увеличении текста или изменении размеров страницы.
Как проверить элемент на переполнение текстом
Во вкладке Elements найдите в DOM-дереве элемент, кликните по нему два раза и добавьте текст:
Добавлять текст можно и на самой странице. Для этого откройте соседнюю вкладку Console, введите команду document.body.contentEditable = true и нажмите Enter. После запуска команды вы сможете нажать на элемент и отредактировать его.
Переполнение родительских блоков
Чтобы проверить, не выпадают ли блоки из потока и сохраняется ли сетка, найдите родителя и ему добавьте несколько дополнительных дочерних элементов. Для этого кликните на одном из таких элементов правой кнопкой мыши и нажмите на Duplicate Element.
Пример переполнения: элементы выпадают из родительского блока.
Узнать, какие файлы подключены, и посмотреть их расположение
Порой разработчикам нужно проверить подключенные к проекту файлы и посмотреть их содержимое. В таких случаях на помощь приходит вкладка Sources:
Слева на панели находятся все загруженные ресурсы. Справа — редактор, в котором можно просмотреть любой из загруженных файлов, в том числе изображения. Здесь же можно редактировать CSS и JavaScript. При этом, если вы редактируете скрипты, обязательно сохраняйте изменения с помощью команд Command + S для Mac или Control + S для Windows и Linux. Сохранять правки CSS не нужно, они сразу вступают в силу. Конечно, после перезагрузки страницы всё откатится до начального состояния.
Иногда бывает сложно разобраться, с чем связана ошибка и как её решить — особенно если вы только начали учиться разработке. В таких случаях приходится искать ответ в интернете: на форумах и профессиональных чатах.
Ещё один способ найти и отладить ошибку — воспроизвести её. Используйте для этого точки останова, которые приостанавливают код в момент его выполнения.
Также можно пойти другим путём: кликните на Event Listener Breakpoints и выберите события, на которых нужно приостановить выполнение кода.
JavaScript выполняется последовательно. Когда Chrome дойдет до точек останова, он остановит выполнение скрипта, и вы сможете отследить, что происходит с кодом. Например, посмотреть значения переменных или разобраться с логикой функций. С этого момента только вы управляете кодом. Можете перейти к следующей точке, шагнуть внутрь функции или отключить точки останова. В этом вам помогут кнопки на панели справа.
Для чего они нужны, пойдём по порядку:
Resume Script Execution — продолжает выполнение скрипта до следующей точки останова. Горячая клавиша F8.
Step over next function call — выполняет строку кода и переходит к следующей функции. Горячая клавиша F10.
Step into next call function call — выполняет строку кода и затем ныряет внутрь функции — на первую строку. Горячая клавиша F11.
Step out of current function — выполняет до конца текущую функцию и останавливается на её последней строке. Горячая клавиша Shift + F11.
Step — по принципу действия похожа на Step into of current function. Но если Step into нужен, чтобы попасть внутрь функции, то Step просто выполнит её и покажет результат. Горячая клавиша F9.
Deactivate breakpoints — отключает точки останова. Горячая клавиша Ctrl + F8.
Pause on exceptions — выполнение JavaScript приостанавливается, когда появляется какое-то исключение.
Проверить качество сайта
При разработке сайта важно позаботиться о том, чтобы он быстро загружался и был доступен для пользователей и поисковых систем. С помощью инструмента Lighthouse вы можете протестировать свой сайт на скорость, семантику, доступность, разметку и другие характеристики.
Lighthouse оценивает классические сайты по четырём критериям: производительность, лучшие практики, SEO и доступность. Для сайтов, выполненных по технологии PWA (прогрессивные веб-приложения), добавляется пятый критерий — progressive web app.
Как использовать Lighthouse
Чтобы запустить проверку, перейдите во вкладку Lighthouse и нажмите на кнопку Generate report. Во время тестирования инструмент будет менять размеры браузера, имитировать отключение и подключение интернета и выполнять другие операции.
В конце вы получите оценки качества сайта по 100-балльной шкале: чем выше оценка, тем лучше. При этом на чистоту проверки могут влиять разные факторы, в том числе интернет-соединение и расширения Chrome. Поэтому лучше запускать тест в режиме инкогнито, закрыв остальные вкладки.
Ниже находятся показатели, которые повлияли на оценку, скриншоты поэтапной отрисовки страницы и предложения — что можно улучшить. Например, Lighthouse может предложить оптимизировать картинки и шрифты, включить отложенную загрузку графики, уменьшить неиспользуемый CSS и JavaScript или внести другие изменения. Каждое предложение подробно описано, можно даже перейти на отдельную страницу и прочитать о нём подробнее.
Lighthouse не единственный инструмент для оценки качества сайта. Есть и другие сервисы, например, PageSpeed Insights. Но он хорошо справляется со своей задачей, и его можно можно использовать при работе с сайтами на локальном сервере.
При оптимизации сайта в Chrome DevTools вы также можете использовать вкладку Network. Она поможет проанализировать загрузку страницы, посмотреть приоритет и вес загружаемых ресурсов, а также увидеть другую полезную информацию. Более подробно о ней мы рассказали в статье «Введение в Chrome DevTools. Console, Sources, Network».
Chrome DevTools облегчает разработку. И хотя начинающим разработчикам бывает непросто сразу разобраться во всех инструментах — это и не нужно. Сначала осваивайте базу и читайте документацию. А чтобы научиться применять Chrome DevTools на практике, попробуйте наши интенсивы «HTML и CSS. Адаптивная вёрстка и автоматизация» и «JavaScript. Профессиональная разработка веб-интерфейсов». Создайте свой проект под руководством наставника, оптимизируйте его производительность и научитесь отладке кода с помощью инструментов разработчика.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Что такое слушатель событий?
Слушатель событий – это функция в JavaScript, которая ожидает событие и отвечает на него. JavaScript – это язык программирования, который используют разработчики для создания интерактивных веб-страниц. С помощью функции слушателя событий JavaScript можно создавать собственные реакции на такие события, как щелчки мыши, нажатия на клавиатуру и изменение размера окна. Парадигма программирования, предполагающая ожидание событий в реальном времени и реагирование на них, называется обработкой событий.
В чем заключается синтаксис функции слушателя событий?
Функция слушателя событий обладает теми же характеристиками, что и другие функции JavaScript. При активации эта функция выполняет необходимые действия для обработки события. Например, благодаря функции слушателя событий можно изменять отображаемый текст, собирать информацию из регистрационных форм или хранить данные в базах данных.
Синтаксис слушателя событий
Функция слушателя событий соответствует правильному синтаксису JavaScript, как в следующем примере.
document.getElementById(«textdisplay1»).innerHTML += «MouseClick happened» ;
В этом примере показана функция слушателя событий RespondMouseClick. Обычно название функции пишется так, чтобы оно соответствовало назначению слушателя событий. В функции вы пишете коды для выполнения определенных действий при наступлении события. В этом примере функция добавляет текст MouseClick happened к HTML-элементу textdisplay1.
Синтаксис обработчика событий
В качестве альтернативы вы можете использовать функцию обработчика событий для ответа на активированное событие, как показано в следующем примере.
if (event.type === «fullscreenchange»)
console.log (“full screen toggle”);
console.log (“full screen error”);
Таким образом, вы можете управлять несколькими типами событий от определенного элемента с помощью одной функции.
Например, вы можете зарегистрировать слушатель событий для обработки всех типов событий блокчейна в приложениях, основанных на событиях. Дополнительные сведения см. в статье о создании приложения, основанного на событиях, с помощью Управляемого блокчейна Amazon.
Как добавить слушатель событий?
Слушатель событий будет активирован только после добавления его в соответствующий элемент JavaScript. Для этого вы можете использовать следующий синтаксис:
- element.addEventListener(event, listener);
- element.addEventListener(event, listener, useCapture);
- element.addEventListener(event, listener, options);
Например, разработчики могут вызвать следующую функцию, чтобы привязать слушатель событий нажатия к элементу кнопки.
Можно также добавить несколько слушателей событий к определенному объекту события, не перезаписывая существующие обработчики событий.
Например, Amazon Web Services (AWS) позволяет разработчикам объединять несколько обратных вызовов для объекта AWS.Request. Дополнительные сведения см. в статье о том, как использовать слушатель событий объекта запросов на AWS.
Параметры добавления событий
Ниже приведено объяснение параметров из предыдущего синтаксиса.
- Параметр event – это любое допустимое событие JavaScript, такое как щелчок, изменение, наведение курсора мыши, нажатие клавиши и загрузка.
- Параметр listener – это обратный вызов события или функция JavaScript, созданная для ответа на определенные события.
- Параметр useCapture – это дополнительный параметр, указывающий режим распространения событий. Он принимает логические значения, где true активирует перехват, а false – всплытие. По умолчанию для этого параметра установлено значение false.
- Параметр options состоит из нескольких дополнительных значений, включая сигналы режима перехвата и отклонения, которые отражают поведение слушателя.
Как удалить слушатель событий?
Слушатели событий остаются активными до тех пор, пока вы не удалите их из связанных элементов JavaScript. Для этого можно использовать следующий синтаксис.
element.removeEventListener(type, listener, useCapture);
Параметры удаления слушателя событий аналогичны параметрам, которые вы используете для его добавления. При удалении слушателя событий необходимо указать те же параметры типа, слушателя и useCapture. Если этого не сделать, слушатель событий будет оставаться активным и продолжать срабатывать для будущих событий.
Например, вы можете добавить событие с помощью следующего кода.
button.addEventListener(«click», RespondMouseClick, true);
Однако при применении следующего кода не удается удалить слушателя событий. Это связано с тем, что значение useCapture отличается от значения, зарегистрированного в объекте кнопки.
button.removeEventListener(«click», RespondMouseClick, false);
Чтобы успешно удалить событие и предотвратить его запуск, вы можете использовать следующий код.
button.removeEventListener(«click», RespondMouseClick, true);
Как работают функции вложенного слушателя событий?
Вложенные слушатели событий – это обработчики событий, добавленные к элементам HTML на разных иерархических уровнях.
В следующем примере HTML документ является владельцем родительского элемента, а родительский элемент – дочернего.
В сложных веб-приложениях может быть несколько родительских и дочерних слоев с соответствующими функциями слушателей событий. Когда происходит определенное событие, слушатели событий запускаются на разных уровнях в определенном порядке. Например, при нажатии на дочернюю кнопку событие будет распространяться на все обработчики, которые фиксируют нажатие мыши.
События могут распространяться в двух режимах: всплытия и перехвата.
Всплытие события
Всплытие – это режим обработки событий JavaScript по умолчанию. Он распространяет событие от самого внутреннего слоя к самому внешнему.
Например, пользователь может навести курсор на текстовое поле в дочернем разделе. Затем приложение может передать событие в следующем порядке:
- Слушатель событий в дочернем объекте обрабатывает событие наведения мыши.
- Затем родительский слушатель событий обрабатывает событие и передает управление слушателю событий документа.
Чтобы настроить всплытие событий, используйте следующий синтаксис:
- element.addEventListener(event, listener, [false]);
- element.addEventListener(event, listener);
Перехват событий
Перехват событий – это специальный режим обработки событий в JavaScript, при котором событие распространяется внутрь из самого внешнего слоя. Как только событие достигает целевого элемента во внутреннем слое, режим обработки событий переходит в режим всплытия. Затем в результате всплытия событие распространяется наружу до самого верхнего слоя.
Например, пользователь может нажать на дочернюю кнопку и запустить следующую последовательность действий:
- Событие щелчка мыши обрабатывает слушатель событий документа, а затем – родительский обработчик событий.
- Событие достигает целевого элемента – кнопки. Событие обрабатывает слушатель событий кнопки.
- Обработка событий переключается из режима записи в режим всплытия.
- То же событие щелчка мыши запускает обработчик события на родительском объекте, а затем переходит к документу.
Как выбрать между всплытием и перехватом
Всплытие и перехват позволяют по-разному управлять событиями. Режим всплытия используется редко, поскольку перехвата достаточно для обработки большинства событий в приложениях.
Выбирая между всплытием и перехватом, следует учитывать процесс распространения событий и его соответствие логике программирования вашего приложения.
Например, рассмотрим родительскую форму, состоящую из двух дочерних элементов. Первый элемент требует немедленного обновления при возникновении события во втором элементе. В этом случае вам следует использовать режим перехвата. Благодаря ему родительский слушатель событий обрабатывает событие и обновляет первый элемент. Затем он передает управление слушателю событий на втором дочернем элементе.
Как остановить распространение событий в функциях вложенных слушателей событий?
События передаются до тех пор, пока не достигнут конечного адресата в виде вложенного слушателя. Чтобы предотвратить дальнейшее распространение события, необходимо использовать определенные методы.
Следующий метод останавливает событие в слушателе событий.
Например, если вы вызовете StopPropagation дочерней кнопкой, событие щелчка мыши не распространится на родительский уровень и уровень документа. Таким образом, слушатели мероприятий более высокого уровня не будут активированы.
Остановить распространение всех событий
StopPropagation останавливает распространение событий только текущего типа. Если в объекте зарегистрированы разные типы слушателей событий, они все равно срабатывают, несмотря на вызов команды StopPropagation.
Чтобы остановить все события, связанные с определенным объектом, вы можете использовать метод StopImmediatePropagation следующим образом.
Когда один слушатель событий вызывает StopImmediatePropagation, другие слушатели, связанные с объектом, не запускаются.
Как AWS обеспечивает соответствие вашим требованиям к JavaScript?
Amazon Web Services (AWS) предлагает SDK AWS для JavaScript, чтобы вы могли легко использовать сервисы в своих приложениях с помощью библиотек и API.
SDK можно использовать для разработки серверных, веб- и мобильных веб-приложений. SDK поддерживает среды выполнения JavaScript, Node.JS и React Native, а также их сочетания. Благодаря этому разработчики могут запускать один и тот же пакет сервисов клиента на разных платформах.
Ниже приведены другие преимущества использования SDK.
- SDK написан на языке TypeScript. Таким образом обеспечиваются такие преимущества, как статическая проверка типов и поддержка классов и модулей.
- В SDK есть стек промежуточного программного обеспечения, который позволяет вводить настраиваемые действия.
- SDK обладает модульной архитектурой. Благодаря этому вы можете использовать только необходимые пакеты для оптимизации производительности приложения.
Начните работу с приложениями JavaScript, зарегистрировав аккаунт AWS сегодня.