Что такое событие?

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

Теперь давайте узнаем о функции обработчика событий для создания интерактивных веб-сайтов.

1. Регистрация обработчиков событий:

Функция обработчика события регистрируется как свойство, прикрепленное к элементу DOM, с которым происходит взаимодействие.

Проверьте синтаксис:

Разберем синтаксис:

  1. Во-первых, мы получили доступ к элементу DOM по его идентификатору, определенному в HTML-файле, используя: document.getElementById(‘targetElement’); и сохраните его в переменной eventTarget.
  2. Затем мы создали свойство обработчика событий в приведенном выше синтаксисе. Мы используем событие щелчка, которое срабатывает, когда пользователь нажимает и отпускает кнопку мыши на элементе DOM.
  3. Наконец, мы присвоили свойству функцию обработчика событий.

Обработчик событий также можно зарегистрировать как HTML-элемент, но рекомендуется избегать встроенного JavaScript.

Лучше всего создавать именованные функции-обработчики событий вместо анонимных функций. Таким образом, ваш код останется организованным.

Вот пример функции обработчика именованных событий:

Добавление обработчиков событий:

Например, eventTarget.onclick = eventHandlerFunction; eventTarget.addEventListener(‘click’, eventHandlerFunction); method — это еще один альтернативный способ регистрации обработчиков событий. Функция addEventListener ожидает возникновения определенного события и реагирует на него. Этот метод требует два аргумента:

  1. Тип события в виде строки, в данном случае 'click'.
  2. Функция обработчика событий.

Удаление обработчиков событий:

Метод .removeEventListener() используется для реверсирования метода .addEventListener(). Этот метод не позволяет коду «прослушивать» событие, которое должно сработать, когда в этом больше нет необходимости. .removeEventListener также передает два аргумента:

  1. Тип события в виде строки
  2. Функция обработчика событий

Предопределенные свойства объекта события:

Существуют предопределенные свойства, связанные с объектами событий, которые вы можете вызывать для просмотра информации о событии.

  1. Свойство .target для доступа к элементу, вызывающему событие.
  2. .type для доступа к названию события.
  3. .timeStamp для доступа к времени в миллисекундах, прошедшему с момента загрузки документа.

Тип события:

Помимо события click, существуют все типы событий DOM, которые могут запускаться в браузере! Важно знать, что большинство событий в DOM происходят незаметно, потому что к ним не подключены обработчики событий. Чтобы узнать больше о типах событий, ознакомьтесь со справочником MDN:

Список событий

Все события мыши, найденные в документах MDN по ссылке выше:

Спасибо и счастливого кодирования!