JavaScript — Слушатели и обработчики событий

Привет всем 👋 Давайте поговорим об обработке событий в JavaScript.

Оглавление

  1. Введение
  2. Слушатель событий и обработчик событий
  3. Перехват и пузырьки
  4. Пример

Введение

Когда я начал изучать JavaScript (JS), я где-то прочитал, что JS — это событийно-ориентированный язык программирования, и что использование JS в браузере — это добавление интерактивности веб-страницам.

Но что такое события в JS? Ну, события — это просто действия, которые происходят, когда пользователь получает доступ к веб-страницам, и это может быть загрузка документа, получение данных, нажатие на элементы внутри документа, нажатие клавиш или сенсорного экрана и многое другое.

Эти действия известны как события в JS, и мы можем реагировать на эти события, вызывая функции и манипулируя DOM, чтобы обеспечить интерактивность и обратную связь с пользователем.

Слушатель событий и обработчик событий

Представьте, что у вас есть кнопка, и вы хотите знать, когда пользователь нажмет на эту кнопку, чтобы можно было запустить блок кода. Вы можете прикрепить слушатель событий к любому элементу, который вы хотите «слушать» для типа события, используя .addEventListener(). Этот метод обычно принимает два параметра, первый из которых — тип события, которое вы хотите прослушать (в виде строки), а второй — функция обратного вызова, которую вы хотите запустить при наступлении события (иногда ее называют «fires»). Функция, которая запускается, когда событие «срабатывает», иногда называется обработчиком события.

Обычно вы захватываете элемент из HTML DOM, используя что-то вроде document.getElementById() или document.querySelector(). Мне нравится использовать .querySelector, потому что это проще, так как это тот же селектор, что и в CSS.

const button = document.querySelector("button");
button.addEventListener("click", (e)=> {
   // some code to manipulate the DOM here
});
Вход в полноэкранный режим Выход из полноэкранного режима

Вы можете заметить, что в примере анонимная функция принимает аргумент e. Этот аргумент является объектом события, это объект, который содержит подробности о произошедшем событии, так что вы можете перехватить такие вещи, как цель события, координаты курсора и т.д.

К элементу можно прикрепить более одного слушателя событий, и если они одного типа, то функция обратного вызова будет выполняться в том порядке, в котором были определены слушатели событий.

Существует также другой способ прикрепить слушатель событий к элементу, который заключается в установке свойства обработчика события в функцию, обрабатывающую это событие. Например, buttton.onclick = doMagic, но, добавляя таким образом обработчик событий, вы можете добавить только один обработчик.

Фаза захвата и пузырька

Иногда бывает, что у вас есть слушатель событий на родительском элементе, но нет на дочернем, или он есть для обоих. Поэтому, чтобы разобраться с ситуацией со вложенными элементами и с тем, когда будет выполняться каждый обработчик событий, вам нужно знать о фазе захвата (Capture) и фазе пузыря (Bubble). «Пузырение» означает, что событие «распространяется», то есть движется вверх и наружу от самого внутреннего элемента вплоть до элемента <html>. А «Захват» — наоборот, браузер будет вызывать обработчик события для самого внешнего элемента (<html>) вплоть до самого внутреннего элемента.

Фаза Capture всегда вызывается перед фазой Bubble, что означает, что любой элемент с обработчиком событий, настроенным на использование capture, сработает раньше всех элементов, настроенных на bubble. Чтобы использовать захват, вернемся к .addEventListener(), вы можете добавить третий аргумент при присоединении слушателя событий { capture: true }.

Пример

В приведенном ниже примере я сделал нечто глупое. Я использовал свойство обработчика события window.onload, чтобы заставить пузырьки появляться на экране после загрузки окна. Я добавил слушатель события для каждого пузырька, чтобы при входе мыши в элемент пузырек исчезал. Я также добавил небольшой пример захвата и пузырьков в нижней части JS-файла, консольный логгинг некоторых слов при нажатии на элемент. Вы можете увидеть фрагмент кода ниже, угадайте, что будет записано в консоли, затем нажмите в любом месте экрана и проверьте консоль, чтобы увидеть, были ли вы правы 😀. Примечание: canvas — это имя переменной, в которой хранится элемент <main> страницы.


function sparkle() {
  console.log("sparkle");
}

function sparkleTwice() {
  console.log("sparkle, sparkle");
}

function dazzle() {
  console.log("dazzle");
}

document.addEventListener("click", sparkle, {capture: true});
document.addEventListener("click", sparkleTwice)
canvas.addEventListener("click", dazzle);

Вход в полноэкранный режим Выход из полноэкранного режима

Резюме

Итак, если вы хотите прослушивать определенные действия, события, то вы можете прикрепить к элементу слушатель событий. Когда событие сработает, слушатель вызовет обработчик события — функцию обратного вызова, принимающую объект события в качестве параметра, и выполнит блок кода. Если у вас есть вложенные элементы, вы теперь знаете, что пузырение вызовет распространение события вверх, поэтому если вы обнаружите странное поведение или проблемы с вашим слушателем событий, это может быть причиной. Вы также знаете об использовании захвата для запуска обработчиков событий в определенном порядке.

Я считаю, что лучший способ понять любую концепцию — это выйти и попробовать что-то реализовать. Если вам нужна отправная точка, вы можете сломать мой код, добавить больше слушателей событий, изменить функцию, поиграть с ним. Или просто создайте свой собственный с нуля! 😀

Спасибо за прочтение, если у вас есть комментарии или отзывы, пожалуйста, оставьте их ниже.

Оцените статью
Procodings.ru
Добавить комментарий