Подія

Переклад цієї статті ще не завершено. Будь ласка, допоможіть перекласти цю статтю з англійської мови

{{APIRef("DOM")}}

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

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

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

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

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

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

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

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

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

Конструктор

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

Властивості

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

{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}

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

Методи

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

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

Характеристика Статус Коментар
{{SpecName('DOM WHATWG', '#interface-event', 'Event')}} {{Spec2('DOM WHATWG')}}

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

приховано

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

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