Об'єкт події

Щоб обробити подію - недостатньо знати про те, що це клік або натискання клавіші, можуть знадобитися деталі. Наприклад, поточне значення текстового поля, елемент, на якому відбулася подія, вбудовані методи та інші. Об’єкт події — це спеціальний об’єкт, який автоматично створюється браузером при виникненні події (наприклад, клік, натискання клавіші, рух миші). Він містить детальну інформацію про подію та передається як аргумент у функцію-обробник. Розуміння цього об’єкта критично важливе для ефективної роботи з подіями в JavaScript.

Основні властивості та методи об’єкта події

Кожен об’єкт події має набір властивостей і методів, які дозволяють:

Отримати дані про подію (наприклад, елемент, на якому сталася подія, координати миші).
Керувати поведінкою події (наприклад, зупинити спливання або скасувати стандартну дію браузера).

Найчастіше використовувані властивості:

Властивість	Опис
`type`	Тип події (наприклад, `"click"`, `"keydown"`).
`target`	Елемент, на якому виникла подія (найглибший у DOM-дереві).
`currentTarget`	Елемент, до якого прив’язаний обробник (на якому спрацював `addEventListener`).
`eventPhase`	Фаза події: `1` (захоплення), `2` (ціль), `3` (спливання).
`clientX`, `clientY`	Координати курсора відносно вікна браузера (для подій миши).
`key`	Натиснута клавіша (для подій клавіатури, наприклад, `"Enter"`).

Найважливіші методи:

Метод	Опис
`preventDefault()`	Скасовує стандартну дію браузера (наприклад, відправку форми).
`stopPropagation()`	Зупиняє спливання (bubbling) або захоплення (capturing) події.
`stopImmediatePropagation()`	Зупиняє виконання інших обробників цієї ж події на цьому елементі.

Як отримати об’єкт події

Об’єкт події передається першим аргументом у функцію-обробник:

https://stackblitz.com/edit/web-platform-t34lvcbv?devToolsHeight=33&file=script.js

Типи подій та специфічні властивості

Різні типи подій мають унікальні властивості:

Для подій миші(click, mousemove):

event.clientX; // X-координата
event.clientY; // Y-координата
event.button;  // Номер натиснутої кнопки миші

Для подій клавіатури (keydown, keyup):

event.key;     // Символ клавіші (наприклад, "a", "Enter")
event.code;    // Фізичний код клавіші (наприклад, "KeyA", "ArrowLeft")
event.ctrlKey; // Чи натиснута клавіша Ctrl (true/false)