Подія

Event інтерфейс представляє подію, що відбувається в DOM. Подія може бути ініційована дією користувача, наприклад, кліком мишки або натисканням клавіши на клавіатурі, або згенерована API, щоб показати прогрес асинхронного завдання, тощо. Це може бути також ініційовано програмно викликом HTMLElement.click() методу елемента, або створенням екземпляру події, потім відправленням його до вказаного цільового елементу, використовуючи EventTarget.dispatchEvent().

Існує багато різновидів подій, деякі з котрих використовують інші інтерфейси, основані на головному інтерфейсі Event. Сам по собі Event вміщає можливості та методи, спільні для всіх подій.

Багато елементів DOM можуть бути налаштовані прийняти (або "почути") ці події та виконати код у відповідь на процес їхньої обробки. Хендлери подій звичайно пов'язані або додаються до різноманітних HTML elements (таких як <button><div>, <span>, і т.п.) при використанні EventTarget.addEventListener(), а це, як правило, замінює використання атрибутів хендлера подій старого HTML. Надалі за необхідності додавання, такі хендлери також можна відключати, якщо потрібно, використовуючи removeEventListener().  

Примітка: один елемент може мати декілька таких хендлерів, навіть для однієї й тієї ж події - особливо якщо окремо, незалежні модулі коду прикріплять їх, кожний для власних незалежних цілей. (Наприклад, вебсторінка з рекламним модулем та статичним модулем, обидва з яких забезпечують моніторинг перегляду відео.) 

Коли є багато вкладених елементів, кожний зі своїм особистим хендлером (хендлерами), обробка подій може стати дуже складною - особливо там, де батьківський елемент отримує ту ж саму подію, що й її дочірній елемент, тому що "просторово" вони перетинаються і таким чином подія технічно з'являється в них обох, а порядок обробки таких подій залежить від параметрів вспливаючих подій та захоплення кожного обробника.

Інтерфейси на основі Event

Нижче надано список інтерфейсів, які існують на основі головного Event інтерфейсу, із ссилками на відповідну документацію в довіднику MDN API.

Зверніть увагу, що всі інтерфейси подій мають назви із закінченням "Event".

Конструктор

Event()
Створює  Event об'єкт та повертає його абоненту.

Властивості

Event.bubbles Read only
Булевий вираз вказує на те, чи вспливає подія через DOM.
Event.cancelBubble
Історичний псевдонім Event.stopPropagation(). Встановлення його значення true  перед поверненням з обробника події запобігає поширенню події.
Event.cancelable Read only
Булевий вираз вказує на те, чи скасовується подія.
Event.composed Read only
Булевий вираз вказує на те, чи може подія всплити через межу між  тінню DOM та черговим DOM.
Event.currentTarget Read only
Посилання на зареєстровану зараз ціль події. Це об'єкт, на котрий наразі планується відіслати подію. Можливо, це змінилося по дорозі через retargeting.
Event.deepPath  This API has not been standardized.
 Array of DOM Node, через який всплила подія.
Event.defaultPrevented Read only
Вказує, чи виклик event.preventDefault()  скасував подію.
Event.eventPhase Read only
Вказує, яка фаза потоку подій обробляється.
Event.explicitOriginalTarget This API has not been standardized. Read only
Явна оригінальна мета події (Mozilla-specific).
Event.originalTarget This API has not been standardized. Read only
Початкова ціль події перед будь-якими ретаргетингами. (Mozilla-specific).
Event.returnValue
Історична властивість, представлена Internet Explorer і згодом прийнята в специфікацію DOM для того, щоб забезпечити продовження  роботи існуючих сайтів. В ідеалі, вам слід спробувати використати Event.preventDefault() та Event.defaultPrevented замість нього, але ви можете використовувати returnValue, якщо ви  вирішите це зробити.
Event.returnValue This API has not been standardized.
Нестандартний псевдонім (зі старої версії Microsoft Internet Explorer) для Event.target. Деякі інші браузери починають підтримувати його для веб-сумісності.
Event.target Read only
Посилання на ціль, до якої спочатку була відправлена подія.
Event.timeStamp Read only
Час, коли було створено подію (в мілісекундах).  За специфікацією, це значення - час з епохи - але насправді визначення браузерів різняться.Крім того, ведеться робота, щоб змінити його на DOMHighResTimeStamp .
Event.isTrusted Read only
Вказує, чи  була подія ініційована браузером (наприклад, після натискання клавіши на клавіатурі користувачем) або за сценарієм (використовуючи метод створення подій, наприклад Event.initEvent).
Застарілі властивості

Event.scoped Read only This is an obsolete API and is no longer guaranteed to work.

Застарілі; використовуйте замість них composed. (Boolean вказує, чи вспливе дана подія через тіньовий корінь у стандарт DOM.)

Методи

Event.createEvent() This deprecated API should no longer be used, but will probably still work.
Створює нову подію, котра повинна бути ініційована викликом її  initEvent() методу.
Event.composedPath()
Повертає шлях події (об'єкти, на які слухачі будуть викликані). Це не включає вузли через тіньові дерева, якщо тіньовий корінь було створено із закритим ShadowRootmode.
Event.preventDefault()
Скасовує подію, (якщо її можливо скасувати).
Event.stopImmediatePropagation()
Для цієї конкретної події не дозволяйте викликати всіх інших слухачів. Сюди входять слухачі, приєднані до одного й того ж елемента, а також ті, що додаються до елементів, які буде прищеплено пізніше (наприклад, під час фази введення).
Event.stopPropagation()
Зупиняє розповсюдження подій далі у DOM.
Застарілі методи
Event.getPreventDefault() This API has not been standardized.
Нестандартний. Використовуйте замість нього Event.defaultPrevented.  (Повертає значення Event.defaultPrevented.)
Event.preventBubble() This API has not been standardized. Obsolete since Gecko 24
Застарілий; використовуйте замість нього event.stopPropagation. (Захищає подію від вспливання).
Event.preventcapture() This API has not been standardized. Obsolete since Gecko 24
Застарілий; використовуйте замість нього event.stopPropagation.

Технічні характеристики

Характеристика Статус Коментар
DOM
The definition of 'Event' in that specification.
Living Standard

Сумісність з браузером

приховано

Таблиця сумісності на цій сторінці формується із структурованих даних. Якщо ви захочете побачити її, будь ласка, перевірте та відправте нам запит https://github/com/mdn/browser-compat-data

Дивіться також