diff options
Diffstat (limited to 'files/uk/web/api/event/index.html')
| -rw-r--r-- | files/uk/web/api/event/index.html | 189 |
1 files changed, 189 insertions, 0 deletions
diff --git a/files/uk/web/api/event/index.html b/files/uk/web/api/event/index.html new file mode 100644 index 0000000000..a7523c4d23 --- /dev/null +++ b/files/uk/web/api/event/index.html @@ -0,0 +1,189 @@ +--- +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><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> |