Какие знаешь базовые поля у объекта события?

Основные поля объекта Event в JavaScript

Объект Event — это фундаментальная сущность в браузерной модели DOM, представляющая любое взаимодействие пользователя или системное событие. Он содержит множество стандартных полей (свойств) и методов. Вот ключевые из них:

1. Основные свойства, описывающие событие

// Пример обработчика, где `event` — это объект события
element.addEventListener('click', function(event) {
    // Используем свойства event
    console.log(event.type); // Тип события
});

• type (строка): Название события ('click', 'keydown', 'submit' и т.д.). Это, пожалуй, самое часто используемое свойство, особенно когда один обработчик обслуживает несколько типов событий.
• target (элемент DOM): Ссылка на элемент, на котором произошло событие (источник). Например, при клике по кнопке event.target будет указывать именно на эту кнопку.
• currentTarget (элемент DOM): Ссылка на элемент, к которому прикреплён обработчик события. Это особенно важно при делегировании событий. Внутри обработчика this всегда равен event.currentTarget.
• eventPhase (число): Текущая фаза всплытия события. Принимает значения:

    *   `Event.CAPTURING_PHASE` (1) — фаза перехвата.
    *   `Event.AT_TARGET` (2) — цель события.
    *   `Event.BUBBLING_PHASE` (3) — фаза всплытия.

2. Свойства для управления поведением события

element.addEventListener('click', function(event) {
    event.preventDefault(); // Отменяет действие по умолчанию
    event.stopPropagation(); // Останавливает всплытие

    console.log(event.defaultPrevented); // true
    console.log(event.cancelable); // Можно ли отменить?
});

• bubbles (булево): Указывает, всплывает ли событие по DOM-дереву. Например, click — всплывает, focus — нет.
• cancelable (булево): Можно ли отменить действие по умолчанию, связанное с этим событием (например, переход по ссылке или отправку формы).
• defaultPrevented (булево): Было ли действие по умолчанию отменено с помощью preventDefault(). Полезно для проверки в обработчиках на более высоких уровнях.

3. Временные свойства

• timestamp (число, DOMHighResTimeStamp): Время создания события в миллисекундах с момента начала загрузки страницы (примерно). Используется для измерения задержек.
• isTrusted (булево): true, если событие инициировано действием пользователя (например, реальный клик мышью). false, если событие создано программно с помощью new Event() или dispatchEvent(). Это важный аспект безопасности.

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

event.preventDefault();  // 1. Отмена стандартного действия браузера
event.stopPropagation(); // 2. Остановка всплытия события
event.stopImmediatePropagation(); // 3. Полная остановка (всплытие + другие обработчики на этом элементе)

5. Специализированные события и их уникальные поля

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

• UIEvent (события пользовательского интерфейса: load, resize, scroll):

    *   `view` — ссылка на объект `window` (`AbstractView`).

• MouseEvent (события мыши: click, mousemove, mouseover):

  // Пример использования свойств MouseEvent
  element.addEventListener('click', function(event) {
      console.log(`Кликнули по координатам: ${event.clientX}, ${event.clientY}`);
      console.log(`Нажатая кнопка: ${event.button}`); // 0 - левая, 1 - средняя, 2 - правая
      console.log(`Клавиши-модификаторы: Ctrl:${event.ctrlKey}, Shift:${event.shiftKey}`);
  });
  

    *   `clientX`, `clientY` — координаты курсора **относительно окна браузера** (viewport).
    *   `pageX`, `pageY` — координаты **относительно всего документа** (учитывают прокрутку).
    *   `button` — какая кнопка мыши была нажата (0 – левая, 1 – средняя, 2 – правая).
    *   `buttons` — битовая маска нажатых в данный момент кнопок мыши.
    *   `ctrlKey`, `shiftKey`, `altKey`, `metaKey` (булево) — состояние клавиш-модификаторов.

• KeyboardEvent (события клавиатуры: keydown, keyup):

    *   `key` — строковое значение нажатой клавиши (например, `'a'`, `'Enter'`, `'ArrowUp'`). **Современное и рекомендованное свойство**.
    *   `code` — физический код клавиши на клавиатуре (например, `'KeyA'`, `'Digit1'`). Полезно для управления в играх.
    *   `keyCode`, `charCode` — устаревшие свойства, использование которых не рекомендуется.
    *   `repeat` — указывает, что клавиша зажата и событие генерируется повторно.

• FocusEvent (события фокуса: focus, blur):

    *   `relatedTarget` — элемент, с которого или на который перешёл фокус.

Практическое значение и выводы

Понимание этих полей критически важно для:

• Делегирования событий: Использование event.target для определения исходного элемента.
• Отмены стандартного поведения браузера: preventDefault() для форм, ссылок и т.д.
• Контроля за распространением событий: stopPropagation() для предотвращения всплытия и изоляции логики.
• Создания сложных интерактивных интерфейсов: Работа с координатами мыши, обработка комбинаций клавиш, анализ жестов.

Запомните, что event.target — это "где произошло", а event.currentTarget (или this) — "где обрабатывается". Это различие лежит в основе эффективного управления событиями в современном фронтенд-разработке.