1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
|
---
title: Подія
slug: Web/API/Подія
translation_of: Web/API/Event
---
<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><button></code>, <code><div></code>, <code><span></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>
|
