Объект события 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 играет ключевую роль в обработке и управлении событиями в браузере. Понимание его свойств и методов позволяет разработчикам создавать более интерактивные и отзывчивые приложения, точно реагирующие на действия пользователей и условия окружающей среды.