From daa1a2aff136fa9da1fcc97d7da97a2036fabc77 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:47 +0100 Subject: unslug uk: move --- files/uk/web/api/event/index.html | 188 +++++++++++++++++++++++++++++++ files/uk/web/api/event/target/index.html | 134 ++++++++++++++++++++++ 2 files changed, 322 insertions(+) create mode 100644 files/uk/web/api/event/index.html create mode 100644 files/uk/web/api/event/target/index.html (limited to 'files/uk/web/api/event') 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 +--- +

{{APIRef("DOM")}}

+ +

Event інтерфейс представляє подію, що відбувається в DOM. Подія може бути ініційована дією користувача, наприклад, кліком мишки або натисканням клавіши на клавіатурі, або згенерована API, щоб показати прогрес асинхронного завдання, тощо. Це може бути також ініційовано програмно викликом HTMLElement.click() методу елемента, або створенням екземпляру події, потім відправленням його до вказаного цільового елементу, використовуючи EventTarget.dispatchEvent().

+ +

Існує багато різновидів подій, деякі з котрих використовують інші інтерфейси, основані на головному інтерфейсі Event. Сам по собі Event вміщає можливості та методи, спільні для всіх подій.

+ +

Багато елементів DOM можуть бути налаштовані прийняти (або "почути") ці події та виконати код у відповідь на процес їхньої обробки. Хендлери подій звичайно пов'язані або додаються до різноманітних HTML elements (таких як <button>, <div>, <span>, і т.п.) при використанні EventTarget.addEventListener(), а це, як правило, замінює використання атрибутів хендлера подій старого HTML. Надалі за необхідності додавання, такі хендлери також можна відключати, якщо потрібно, використовуючи removeEventListener().  

+ +

Примітка: один елемент може мати декілька таких хендлерів, навіть для однієї й тієї ж події - особливо якщо окремо, незалежні модулі коду прикріплять їх, кожний для власних незалежних цілей. (Наприклад, вебсторінка з рекламним модулем та статичним модулем, обидва з яких забезпечують моніторинг перегляду відео.) 

+ +

Коли є багато вкладених елементів, кожний зі своїм особистим хендлером (хендлерами), обробка подій може стати дуже складною - особливо там, де батьківський елемент отримує ту ж саму подію, що й її дочірній елемент, тому що "просторово" вони перетинаються і таким чином подія технічно з'являється в них обох, а порядок обробки таких подій залежить від параметрів вспливаючих подій та захоплення кожного обробника.

+ +

Інтерфейси на основі Event

+ +

Нижче надано список інтерфейсів, які існують на основі головного Event інтерфейсу, із ссилками на відповідну документацію в довіднику MDN API.

+ +

Зверніть увагу, що всі інтерфейси подій мають назви із закінченням "Event".

+ + + +
+ +
+ +

Конструктор

+ +
+
{{domxref("Event.Event", "Event()")}}
+
Створює  Event об'єкт та повертає його абоненту.
+
+ +

Властивості

+ +
+
{{domxref("Event.bubbles")}} {{readonlyinline}}
+
Булевий вираз вказує на те, чи вспливає подія через DOM.
+
{{domxref("Event.cancelBubble")}}
+
Історичний псевдонім {{domxref("Event.stopPropagation()")}}. Встановлення його значення true  перед поверненням з обробника події запобігає поширенню події.
+
{{domxref("Event.cancelable")}} {{readonlyinline}}
+
Булевий вираз вказує на те, чи скасовується подія.
+
{{domxref("Event.composed")}} {{ReadOnlyInline}}
+
Булевий вираз вказує на те, чи може подія всплити через межу між  тінню DOM та черговим DOM.
+
{{domxref("Event.currentTarget")}} {{readonlyinline}}
+
Посилання на зареєстровану зараз ціль події. Це об'єкт, на котрий наразі планується відіслати подію. Можливо, це змінилося по дорозі через retargeting.
+
{{domxref("Event.deepPath")}} {{non-standard_inline}}
+
 {{jsxref("Array")}} of DOM {{domxref("Node")}}, через який всплила подія.
+
{{domxref("Event.defaultPrevented")}} {{readonlyinline}}
+
Вказує, чи виклик {{domxref("event.preventDefault()")}}  скасував подію.
+
{{domxref("Event.eventPhase")}} {{readonlyinline}}
+
Вказує, яка фаза потоку подій обробляється.
+
{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
Явна оригінальна мета події (Mozilla-specific).
+
{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
Початкова ціль події перед будь-якими ретаргетингами. (Mozilla-specific).
+
{{domxref("Event.returnValue")}}
+
Історична властивість, представлена Internet Explorer і згодом прийнята в специфікацію DOM для того, щоб забезпечити продовження  роботи існуючих сайтів. В ідеалі, вам слід спробувати використати {{domxref(''Event.preventDefault()")}} та {{domxref("Event.defaultPrevented")}} замість нього, але ви можете використовувати returnValue, якщо ви  вирішите це зробити.
+
{{domxref("Event.returnValue")}} {{non-standard_inline}}
+
Нестандартний псевдонім (зі старої версії Microsoft Internet Explorer) для {{domxref("Event.target")}}. Деякі інші браузери починають підтримувати його для веб-сумісності.
+
{{domxref("Event.target")}} {{readonlyinline}}
+
Посилання на ціль, до якої спочатку була відправлена подія.
+
{{domxref("Event.timeStamp")}} {{readonlyinline}}
+
Час, коли було створено подію (в мілісекундах).  За специфікацією, це значення - час з епохи - але насправді визначення браузерів різняться.Крім того, ведеться робота, щоб змінити його на {{domxref("DOMHighResTimeStamp")}} .
+
{{domxref("Event.isTrusted")}} {{readonlyinline}}
+
Вказує, чи  була подія ініційована браузером (наприклад, після натискання клавіши на клавіатурі користувачем) або за сценарієм (використовуючи метод створення подій, наприклад {{domxref("Event.initEvent")}}).
+
Застарілі властивості
+
+ +

{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}

+ +

Застарілі; використовуйте замість них {{domxref("Event.composed", "composed")}}. ({{jsxref("Boolean")}} вказує, чи вспливе дана подія через тіньовий корінь у стандарт DOM.)

+ +

Методи

+ +
+
{{domxref("Event.createEvent()")}} {{deprecated_inline}}
+
Створює нову подію, котра повинна бути ініційована викликом її  initEvent() методу.
+
{{domxref("Event.composedPath()")}}
+
Повертає шлях події (об'єкти, на які слухачі будуть викликані). Це не включає вузли через тіньові дерева, якщо тіньовий корінь було створено із закритим {{domxref("ShadowRootmode")}}.
+
{{domxref("Event.preventDefault()")}}
+
Скасовує подію, (якщо її можливо скасувати).
+
{{domxref("Event.stopImmediatePropagation()")}}
+
Для цієї конкретної події не дозволяйте викликати всіх інших слухачів. Сюди входять слухачі, приєднані до одного й того ж елемента, а також ті, що додаються до елементів, які буде прищеплено пізніше (наприклад, під час фази введення).
+
{{domxref("Event.stopPropagation()")}}
+
Зупиняє розповсюдження подій далі у DOM.
+
Застарілі методи
+
{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}
+
Нестандартний. Використовуйте замість нього {{domxref("Event.defaultPrevented")}}.  (Повертає значення {{domxref("Event.defaultPrevented")}}.)
+
{{domxref("Event.preventBubble()"}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Застарілий; використовуйте замість нього {{domxref("event.stopPropagation")}}. (Захищає подію від вспливання).
+
{{domxref("Event.preventcapture()"}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Застарілий; використовуйте замість нього {{domxref("event.stopPropagation"}}.
+
+ +

Технічні характеристики

+ + + + + + + + + + + + + + +
ХарактеристикаСтатусКоментар
{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}{{Spec2('DOM WHATWG')}}
+ +

Сумісність з браузером

+ +

приховано

+ +

Таблиця сумісності на цій сторінці формується із структурованих даних. Якщо ви захочете побачити її, будь ласка, перевірте та відправте нам запит https://github/com/mdn/browser-compat-data

+ + + +

Дивіться також

+ + 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 +--- +

{{ApiRef("DOM")}}

+ +

Властивість target інтерфейсу {{domxref("Event")}} є посиланням на об'єкт який відправив подію. Він відрізняється від {{domxref("Event.currentTarget")}} коли обробник події викликається в фазі спливання або фіксації події.

+ +

Синтаксис

+ +
var theTarget = event.target;
+ +

Приклад

+ +

Властивість event.target може бути використана для реалізації делегування події.

+ +
// Зробити список
+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);
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-event-target", "Event.target")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}{{Spec2("DOM2 Events")}}Initial definition
+ +

Сумісність з браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Нотатки про сумісність

+ +

В браузерах IE 6-8 використовується інша модель подій. Слухачі подій приєднуються з використанням нестандартного методу {{domxref('EventTarget.attachEvent')}}. В цій моделі, об'єкт події має {{domxref('Event.srcElement')}} властивість, замість властивості target, і воно має ту ж саму семантику як event.target.

+ +
function hide(e) {
+  // Підтримка IE6-8
+  var target = e.target || e.srcElement;
+  target.style.visibility = 'hidden';
+}
+
+ +

Читати також

+ + -- cgit v1.2.3-54-g00ecf