---
title: Подія
slug: Web/API/Event
translation_of: Web/API/Event
original_slug: Web/API/Подія
---
<p>{{APIRef("DOM")}}</p>

<p><font color="#333333" face="consolas, Liberation Mono, courier, monospace"><code><strong>Event</strong></code> інтерфейс представляє подію, що відбувається в DOM. Подія може бути ініційована дією користувача, наприклад, кліком мишки або натисканням клавіши на клавіатурі, або згенерована API, щоб показати прогрес асинхронного завдання, тощо. Це може бути також ініційовано програмно викликом <code><a href="https://developer.mozilla.org/uk/docs/Web/API/HTMLElement/click">HTMLElement.click()</a></code> методу елемента, або створенням екземпляру події, потім відправленням його до вказаного цільового елементу, використовуючи <code><a href="https://developer.mozilla.org/uk/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a></code>.</font></p>

<p><font color="#333333" face="consolas, Liberation Mono, courier, monospace">Існує багато різновидів подій, деякі з котрих використовують інші інтерфейси, основані на головному інтерфейсі <code>Event</code>. Сам по собі <code>Event</code> вміщає можливості та методи, спільні для всіх подій.</font></p>

<p><font face="consolas, Liberation Mono, courier, monospace">Багато елементів DOM можуть бути налаштовані прийняти (або "почути") ці події та виконати код у відповідь на процес їхньої обробки. Хендлери подій звичайно пов'язані або додаються до різноманітних <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element">HTML elements</a> (таких як <code>&lt;button&gt;</code>, <code>&lt;div&gt;</code>, <code>&lt;span&gt;</code>, і т.п.) при використанні <code><a href="https://developer.mozilla.org/uk/docs/Web/API/EventTarget/addEventListener">EventTarget.addEventListener()</a></code>, а це, як правило, замінює використання <a href="https://developer.mozilla.org/uk/docs/HTML/Global_attributes">атрибутів хендлера подій </a>старого HTML. Надалі за необхідності додавання, такі хендлери також можна відключати, якщо потрібно, використовуючи <code><a href="https://developer.mozilla.org/uk/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>.  </font></p>

<p><font face="consolas, Liberation Mono, courier, monospace">Примітка: один елемент може мати декілька таких хендлерів, навіть для однієї й тієї ж події - особливо якщо окремо, незалежні модулі коду прикріплять їх, кожний для власних незалежних цілей. (Наприклад, вебсторінка з рекламним модулем та статичним модулем,</font><font face="consolas, Liberation Mono, courier, monospace"> обидва з яких забезпечують моніторинг перегляду відео.) </font></p>

<p><font face="consolas, Liberation Mono, courier, monospace">Коли є багато вкладених елементів, кожний зі своїм особистим хендлером (хендлерами), обробка подій може стати дуже складною - особливо там, де батьківський елемент отримує ту ж саму подію, що й її дочірній елемент, тому що "просторово" вони перетинаються і таким чином подія технічно з'являється в них обох, а порядок обробки таких подій залежить від параметрів вспливаючих подій та захоплення кожного обробника.</font></p>

<h2 id="Introduction" name="Introduction">Інтерфейси на основі Event</h2>

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

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



<div class="index">
<ul>
 <li>{{domxref("AnimationEvent")}}</li>
 <li>{{domxref("AudioProcessingEvent")}}</li>
 <li>{{domxref("BeforeInputEvent")}}</li>
 <li>{{domxref("BeforeUnloadEvent")}}</li>
 <li>{{domxref("BlobEvent")}}</li>
 <li>{{domxref("ClipboardEvent")}}</li>
 <li>{{domxref("CloseEvent")}}</li>
 <li>{{domxref("CompositionEvent")}}</li>
 <li>{{domxref("CSSFontFaceLoadEvent")}}</li>
 <li>{{domxref("CustomEvent")}}</li>
 <li>{{domxref("DeviceLightEvent")}}</li>
 <li>{{domxref("DeviceMotionEvent")}}</li>
 <li>{{domxref("DeviceOrientationEvent")}}</li>
 <li>{{domxref("DeviceProximityEvent")}}</li>
 <li>{{domxref("DOMTransactionEvent")}}</li>
 <li>{{domxref("DragEvent")}}</li>
 <li>{{domxref("EditingBeforeInputEvent")}}</li>
 <li>{{domxref("ErrorEvent")}}</li>
 <li>{{domxref("FetchEvent")}}</li>
 <li>{{domxref("FocusEvent")}}</li>
 <li>{{domxref("GamepadEvent")}}</li>
 <li>{{domxref("HashChangeEvent")}}</li>
 <li>{{domxref("IDBVersionChangeEvent")}}</li>
 <li>{{domxref("InputEvent")}}</li>
 <li>{{domxref("KeyboardEvent")}}</li>
 <li>{{domxref("MediaStreamEvent")}}</li>
 <li>{{domxref("MessageEvent")}}</li>
 <li>{{domxref("MouseEvent")}}</li>
 <li>{{domxref("MutationEvent")}}</li>
 <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
 <li>{{domxref("PageTransitionEvent")}}</li>
 <li>{{domxref("PointerEvent")}}</li>
 <li>{{domxref("PopStateEvent")}}</li>
 <li>{{domxref("ProgressEvent")}}</li>
 <li>{{domxref("RelatedEvent")}}</li>
 <li>{{domxref("RTCDataChannelEvent")}}</li>
 <li>{{domxref("RTCIdentityErrorEvent")}}</li>
 <li>{{domxref("RTCIdentityEvent")}}</li>
 <li>{{domxref("RTCPeerConnectionIceEvent")}}</li>
 <li>{{domxref("SensorEvent")}}</li>
 <li>{{domxref("StorageEvent")}}</li>
 <li>{{domxref("SVGEvent")}}</li>
 <li>{{domxref("SVGZoomEvent")}}</li>
 <li>{{domxref("TimeEvent")}}</li>
 <li>{{domxref("TouchEvent")}}</li>
 <li>{{domxref("TrackEvent")}}</li>
 <li>{{domxref("TransitionEvent")}}</li>
 <li>{{domxref("UIEvent")}}</li>
 <li>{{domxref("UserProximityEvent")}}</li>
 <li>{{domxref("WebGLContextEvent")}}</li>
 <li>{{domxref("WheelEvent")}}</li>
</ul>
</div>

<h2 id="Constructor" name="Constructor">Конструктор</h2>

<dl>
 <dt>{{domxref("Event.Event", "Event()")}}</dt>
 <dd>Створює  <code>Event</code> об'єкт та повертає його абоненту.</dd>
</dl>

<h2 id="Properties" name="Properties">Властивості</h2>

<dl>
 <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt>
 <dd>Булевий вираз вказує на те, чи вспливає подія через DOM.</dd>
 <dt>{{domxref("Event.cancelBubble")}}</dt>
 <dd>Історичний псевдонім {{domxref("Event.stopPropagation()")}}. Встановлення його значення <code>true</code>  перед поверненням з обробника події запобігає поширенню події.</dd>
 <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt>
 <dd>Булевий вираз вказує на те, чи скасовується подія.</dd>
 <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt>
 <dd>Булевий вираз вказує на те, чи може подія всплити через межу між  тінню DOM та черговим DOM.</dd>
 <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt>
 <dd>Посилання на зареєстровану зараз ціль події. Це об'єкт, на котрий наразі планується відіслати подію. Можливо, це змінилося по дорозі через <em>retargeting</em>.</dd>
 <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt>
 <dd> {{jsxref("Array")}} of DOM {{domxref("Node")}}, через який всплила подія.</dd>
 <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt>
 <dd>Вказує, чи виклик {{domxref("event.preventDefault()")}}  скасував подію.</dd>
 <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt>
 <dd>Вказує, яка фаза потоку подій обробляється.</dd>
 <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
 <dd>Явна оригінальна мета події (Mozilla-specific).</dd>
 <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
 <dd>Початкова ціль події перед будь-якими ретаргетингами. (Mozilla-specific).</dd>
 <dt>{{domxref("Event.returnValue")}}</dt>
 <dd>Історична властивість, представлена Internet Explorer і згодом прийнята в специфікацію DOM для того, щоб забезпечити продовження  роботи існуючих сайтів. В ідеалі, вам слід спробувати використати {{domxref("Event.preventDefault()")}} та {{domxref("Event.defaultPrevented")}} замість нього, але ви можете використовувати <code>returnValue</code>, якщо ви  вирішите це зробити.</dd>
 <dt>{{domxref("Event.returnValue")}} {{non-standard_inline}}</dt>
 <dd>Нестандартний псевдонім (зі старої версії Microsoft Internet Explorer) для {{domxref("Event.target")}}. Деякі інші браузери починають підтримувати його для веб-сумісності.</dd>
 <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt>
 <dd>Посилання на ціль, до якої спочатку була відправлена подія.</dd>
 <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt>
 <dd>Час, коли було створено подію (в мілісекундах).  За специфікацією, це значення - час з епохи - але насправді визначення браузерів різняться.Крім того, ведеться робота, щоб змінити його на {{domxref("DOMHighResTimeStamp")}} .</dd>
 <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt>
 <dd>Вказує, чи  була подія ініційована браузером (наприклад, після натискання клавіши на клавіатурі користувачем) або за сценарієм (використовуючи метод створення подій, наприклад {{domxref("Event.initEvent")}}).</dd>
 <dt>Застарілі властивості</dt>
</dl>

<p><strong>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</strong></p>

<p>Застарілі; використовуйте замість них {{domxref("Event.composed", "composed")}}. ({{jsxref("Boolean")}} вказує, чи вспливе дана подія через тіньовий корінь у стандарт DOM.)</p>

<h2 id="Methods" name="Methods">Методи</h2>

<dl>
 <dt>{{domxref("Event.createEvent()")}} {{deprecated_inline}}</dt>
 <dd>Створює нову подію, котра повинна бути ініційована викликом її  <code>initEvent() </code>методу.</dd>
 <dt>{{domxref("Event.composedPath()")}}</dt>
 <dd>Повертає шлях події (об'єкти, на які слухачі будуть викликані). Це не включає вузли через тіньові дерева, якщо тіньовий корінь було створено із закритим {{domxref("ShadowRootmode")}}.</dd>
 <dt>{{domxref("Event.preventDefault()")}}</dt>
 <dd>Скасовує подію, (якщо її можливо скасувати).</dd>
 <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt>
 <dd>Для цієї конкретної події не дозволяйте викликати всіх інших слухачів. Сюди входять слухачі, приєднані до одного й того ж елемента, а також ті, що додаються до елементів, які буде прищеплено пізніше (наприклад, під час фази введення).</dd>
 <dt>{{domxref("Event.stopPropagation()")}}</dt>
 <dd>Зупиняє розповсюдження подій далі у DOM.</dd>
 <dt>Застарілі методи</dt>
 <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt>
 <dd>Нестандартний. Використовуйте замість нього {{domxref("Event.defaultPrevented")}}.  (Повертає значення {{domxref("Event.defaultPrevented")}}.)</dd>
 <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
 <dd>Застарілий; використовуйте замість нього {{domxref("event.stopPropagation")}}. (Захищає подію від вспливання).</dd>
 <dt>{{domxref("Event.preventcapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
 <dd>Застарілий; використовуйте замість нього {{domxref("event.stopPropagation")}}.</dd>
</dl>

<h2 id="Технічні_характеристики">Технічні характеристики</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Характеристика</th>
   <th scope="col">Статус</th>
   <th scope="col">Коментар</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Сумісність_з_браузером">Сумісність з браузером</h2>

<p>приховано</p>

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



<h2 id="Дивіться_також">Дивіться також</h2>

<ul>
 <li>Види подій доступні: <a href="/en-US/docs/Web/Reference/Events">Event reference</a></li>
 <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a> (<code>target</code> vs <code>currentTarget</code> vs <code>relatedTarget</code> vs <code>originalTarget</code>)</li>
 <li><a href="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Creating and triggering custom events</a></li>
 <li>Для розробників Firefox add-on:
  <ul>
   <li><a href="/en-US/docs/Listening_to_events_in_Firefox_extensions">Listening to events in Firefox extensions</a></li>
   <li><a href="/en-US/docs/Listening_to_events_on_all_tabs">Listening to events on all tabs</a></li>
  </ul>
 </li>
</ul>