Что такое событие?
События на веб-сайте просто взаимодействуют в браузере. Например, щелчок мышью, загрузка файла в браузере или смахивание изображения влево или вправо.
Теперь давайте узнаем о функции обработчика событий для создания интерактивных веб-сайтов.
1. Регистрация обработчиков событий:
Функция обработчика события регистрируется как свойство, прикрепленное к элементу DOM, с которым происходит взаимодействие.
Проверьте синтаксис:
Разберем синтаксис:
- Во-первых, мы получили доступ к элементу DOM по его идентификатору, определенному в HTML-файле, используя: document.getElementById(‘targetElement’); и сохраните его в переменной eventTarget.
- Затем мы создали свойство обработчика событий в приведенном выше синтаксисе. Мы используем событие щелчка, которое срабатывает, когда пользователь нажимает и отпускает кнопку мыши на элементе DOM.
- Наконец, мы присвоили свойству функцию обработчика событий.
Обработчик событий также можно зарегистрировать как HTML-элемент, но рекомендуется избегать встроенного JavaScript.
Лучше всего создавать именованные функции-обработчики событий вместо анонимных функций. Таким образом, ваш код останется организованным.
Вот пример функции обработчика именованных событий:
Добавление обработчиков событий:
Например, eventTarget.onclick = eventHandlerFunction; eventTarget.addEventListener(‘click’, eventHandlerFunction); method — это еще один альтернативный способ регистрации обработчиков событий. Функция addEventListener ожидает возникновения определенного события и реагирует на него. Этот метод требует два аргумента:
- Тип события в виде строки, в данном случае 'click'.
- Функция обработчика событий.
Удаление обработчиков событий:
Метод .removeEventListener()
используется для реверсирования метода .addEventListener()
. Этот метод не позволяет коду «прослушивать» событие, которое должно сработать, когда в этом больше нет необходимости. .removeEventListener
также передает два аргумента:
- Тип события в виде строки
- Функция обработчика событий
Предопределенные свойства объекта события:
Существуют предопределенные свойства, связанные с объектами событий, которые вы можете вызывать для просмотра информации о событии.
- Свойство .target для доступа к элементу, вызывающему событие.
- .type для доступа к названию события.
- .timeStamp для доступа к времени в миллисекундах, прошедшему с момента загрузки документа.
Тип события:
Помимо события click, существуют все типы событий DOM, которые могут запускаться в браузере! Важно знать, что большинство событий в DOM происходят незаметно, потому что к ним не подключены обработчики событий. Чтобы узнать больше о типах событий, ознакомьтесь со справочником MDN:
Все события мыши, найденные в документах MDN по ссылке выше:
Спасибо и счастливого кодирования!