логотип PurpleSchool
Иконка входа
Вход
  • Обучение
  • Войти
логотип PurpleSchool

Объект события Event в JavaScript

Автор

Дмитрий Нечаев

В JavaScript при возникновении события браузер создаёт объект события, который передаётся в функцию-обработчик. Этот объект содержит все подробности о событии, позволяя разработчикам более точно управлять реакцией на событие. В данной статье мы подробно рассмотрим объект события Event, его свойства и методы, а также научимся использовать его для получения информации о событии.

Основные свойства объекта Event

Объект Event имеет несколько стандартных свойств, которые предоставляют информацию о событии:

  • type: строка, указывающая тип события (например, click).
  • target: элемент, на котором произошло событие.
  • currentTarget: элемент, к которому был прикреплён обработчик события.
  • eventPhase: число, указывающее на текущую фазу прохождения события (1 - перехват, 2 - достигло целевого элемента, 3 - всплытие).
  • bubbles: булево значение, указывающее, может ли событие всплывать.
  • cancelable: булево значение, указывающее, можно ли отменить стандартное поведение события.
  • defaultPrevented: булево значение, которое становится истинным, если был вызван метод preventDefault().
  • timeStamp: время возникновения события в миллисекундах с начала загрузки страницы.

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

document.getElementById('myButton').addEventListener('click', function(event) {
    console.log('Тип события:', event.type);
    console.log('Целевой элемент:', event.target);
    console.log('Элемент, на котором висит обработчик:', event.currentTarget);
    console.log('Фаза события:', event.eventPhase);
});

Методы объекта Event

Объект Event предоставляет несколько методов для управления событием:

  • preventDefault(): отменяет стандартное действие, которое браузер обычно выполняет на это событие.
  • stopPropagation(): предотвращает дальнейшее распространение текущего события.
  • stopImmediatePropagation(): предотвращает дальнейшее распространение текущего события и останавливает выполнение остальных обработчиков событий на текущем элементе.

Пример использования методов:

document.getElementById('link').addEventListener('click', function(event) {
    event.preventDefault(); // Отменяет переход по ссылке
    event.stopPropagation(); // Останавливает всплытие события
    console.log('Клик по ссылке, но переход не произойдет');
});

Расширенные объекты событий

В зависимости от типа события, объект события может иметь дополнительные свойства. Например, объекты событий, связанные с мышью (MouseEvent), содержат информацию о позиции курсора (свойства clientX и clientY), а объекты событий клавиатуры (KeyboardEvent) — о нажатой клавише (свойство key).

Пример объекта события мыши:

document.addEventListener('mousemove', function(event) {
    console.log('Позиция курсора X:', event.clientX);
    console.log('Позиция курсора Y:', event.clientY);
});

Заключение

Объект события Event в JavaScript играет ключевую роль в обработке и управлении событиями в браузере. Понимание его свойств и методов позволяет разработчикам создавать более интерактивные и отзывчивые приложения, точно реагирующие на действия пользователей и условия окружающей среды.

изображение курса

Основы JavaScript

Антон Ларичев
иконка часов18 часов лекций
иконка звёздочки рейтинга4.8
Frontend
Backend
Mobile
2 999 ₽
Основы JavaScript