aboutsummaryrefslogtreecommitdiff
path: root/files/uk/web/api/event
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:51:47 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:51:47 +0100
commitdaa1a2aff136fa9da1fcc97d7da97a2036fabc77 (patch)
tree026b16ef36fc7349d94d983405ae72ef6cb42120 /files/uk/web/api/event
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-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.html188
-rw-r--r--files/uk/web/api/event/target/index.html134
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>&lt;button&gt;</code>, <code>&lt;div&gt;</code>, <code>&lt;span&gt;</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 вказує на елемент &lt;li&gt; на якому було натиснуто
+  // Це відрізняється від e.currentTarget який буде посилатися на батьківський &lt;ul&gt; в даному контексті
+  e.target.style.visibility = 'hidden';
+}
+
+// Приєднання слухача подій до списка
+// Він запуститься при натисканні кожного &lt;li&gt;
+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>