diff options
Diffstat (limited to 'files/uk/web/api/event')
| -rw-r--r-- | files/uk/web/api/event/index.html | 189 | ||||
| -rw-r--r-- | files/uk/web/api/event/target/index.html | 135 |
2 files changed, 0 insertions, 324 deletions
diff --git a/files/uk/web/api/event/index.html b/files/uk/web/api/event/index.html deleted file mode 100644 index 34a2a8e9e9..0000000000 --- a/files/uk/web/api/event/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -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> diff --git a/files/uk/web/api/event/target/index.html b/files/uk/web/api/event/target/index.html deleted file mode 100644 index c9a09ca3e9..0000000000 --- a/files/uk/web/api/event/target/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Event.target -slug: Web/API/Event/target -translation_of: Web/API/Event/target -original_slug: Web/API/Подія/target ---- -<p>{{ApiRef("DOM")}}</p> - -<p>Властивість <code><strong>target</strong></code> інтерфейсу {{domxref("Event")}} є посиланням на об'єкт який відправив подію. Він відрізняється від {{domxref("Event.currentTarget")}} коли обробник події викликається в фазі спливання або фіксації події.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="notranslate">var <em>theTarget</em> = <em>event</em>.target;</pre> - -<h2 id="Приклад">Приклад</h2> - -<p>Властивість <code>event.target</code> може бути використана для реалізації <strong>делегування події</strong>.</p> - -<pre class="brush: js notranslate">// Зробити список -var ul = document.createElement('ul'); -document.body.appendChild(ul); - -var li1 = document.createElement('li'); -var li2 = document.createElement('li'); -ul.appendChild(li1); -ul.appendChild(li2); - -function hide(e){ - // e.target вказує на елемент <li> на якому було натиснуто - // Це відрізняється від e.currentTarget який буде посилатися на батьківський <ul> в даному контексті - e.target.style.visibility = 'hidden'; -} - -// Приєднання слухача подій до списка -// Він запуститься при натисканні кожного <li> -ul.addEventListener('click', hide, false); -</pre> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td> - <td>{{Spec2("DOM2 Events")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Нотатки_про_сумісність">Нотатки про сумісність</h2> - -<p>В браузерах IE 6-8 використовується інша модель подій. Слухачі подій приєднуються з використанням нестандартного методу {{domxref('EventTarget.attachEvent')}}. В цій моделі, об'єкт події має {{domxref('Event.srcElement')}} властивість, замість властивості <code>target</code>, і воно має ту ж саму семантику як <code>event.target</code>.</p> - -<pre class="brush: js notranslate">function hide(e) { - // Підтримка IE6-8 - var target = e.target || e.srcElement; - target.style.visibility = 'hidden'; -} -</pre> - -<h2 id="Читати_також">Читати також</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Порівняння Event Targets</a></li> -</ul> |