diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:51:47 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:51:47 +0100 |
commit | daa1a2aff136fa9da1fcc97d7da97a2036fabc77 (patch) | |
tree | 026b16ef36fc7349d94d983405ae72ef6cb42120 /files/uk/web/api/event | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-daa1a2aff136fa9da1fcc97d7da97a2036fabc77.tar.gz translated-content-daa1a2aff136fa9da1fcc97d7da97a2036fabc77.tar.bz2 translated-content-daa1a2aff136fa9da1fcc97d7da97a2036fabc77.zip |
unslug uk: move
Diffstat (limited to 'files/uk/web/api/event')
-rw-r--r-- | files/uk/web/api/event/index.html | 188 | ||||
-rw-r--r-- | files/uk/web/api/event/target/index.html | 134 |
2 files changed, 322 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..e1aab3dfde --- /dev/null +++ b/files/uk/web/api/event/index.html @@ -0,0 +1,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> diff --git a/files/uk/web/api/event/target/index.html b/files/uk/web/api/event/target/index.html new file mode 100644 index 0000000000..20c17f2d31 --- /dev/null +++ b/files/uk/web/api/event/target/index.html @@ -0,0 +1,134 @@ +--- +title: Event.target +slug: Web/API/Подія/target +translation_of: Web/API/Event/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> |