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 --- .../index.html" | 201 ---------- .../hit_regions_and_accessibility/index.html | 108 ++++++ .../index.html" | 108 ------ files/uk/web/api/event/index.html | 188 +++++++++ files/uk/web/api/event/target/index.html | 134 +++++++ .../api/htmlmediaelement/abort_event/index.html | 68 ++++ files/uk/web/api/page_visibility_api/index.html | 201 ++++++++++ .../api/window/domcontentloaded_event/index.html | 152 ++++++++ .../settimeout/index.html | 428 +++++++++++++++++++++ files/uk/web/api/windowtimers/index.html | 126 ------ .../uk/web/api/windowtimers/settimeout/index.html | 428 --------------------- .../index.html" | 188 --------- .../target/index.html" | 134 ------- 13 files changed, 1279 insertions(+), 1185 deletions(-) delete mode 100644 "files/uk/web/api/api_\320\262\321\226\320\264\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\275\321\217_\321\201\321\202\320\276\321\200\321\226\320\275\320\272\320\270/index.html" create mode 100644 files/uk/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html delete mode 100644 "files/uk/web/api/canvas_api/tutorial/\321\207\321\203\321\202\320\273\320\270\320\262\321\226_\320\264\321\226\320\273\321\217\320\275\320\272\320\270_\321\202\320\260_\320\264\320\276\321\201\321\202\321\203\320\277\320\275\321\226\321\201\321\202\321\214/index.html" create mode 100644 files/uk/web/api/event/index.html create mode 100644 files/uk/web/api/event/target/index.html create mode 100644 files/uk/web/api/htmlmediaelement/abort_event/index.html create mode 100644 files/uk/web/api/page_visibility_api/index.html create mode 100644 files/uk/web/api/window/domcontentloaded_event/index.html create mode 100644 files/uk/web/api/windoworworkerglobalscope/settimeout/index.html delete mode 100644 files/uk/web/api/windowtimers/index.html delete mode 100644 files/uk/web/api/windowtimers/settimeout/index.html delete mode 100644 "files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/index.html" delete mode 100644 "files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/target/index.html" (limited to 'files/uk/web/api') diff --git "a/files/uk/web/api/api_\320\262\321\226\320\264\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\275\321\217_\321\201\321\202\320\276\321\200\321\226\320\275\320\272\320\270/index.html" "b/files/uk/web/api/api_\320\262\321\226\320\264\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\275\321\217_\321\201\321\202\320\276\321\200\321\226\320\275\320\272\320\270/index.html" deleted file mode 100644 index 6675a3783b..0000000000 --- "a/files/uk/web/api/api_\320\262\321\226\320\264\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\275\321\217_\321\201\321\202\320\276\321\200\321\226\320\275\320\272\320\270/index.html" +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: API відображення сторінки -slug: Web/API/API_відображення_сторінки -tags: - - API - - API відображення сторінки - - visibilityState - - visibilitychange - - відображення сторінки - - процеси скритої закладки - - фоновий режим -translation_of: Web/API/Page_Visibility_API ---- -
{{DefaultAPISidebar("Page Visibility API")}}
- -
- -

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

- -
-

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

-
- -

Коли користувач згортає вікно або перемикається на іншу вкладку, API посилає подію {{event("visibilitychange")}}, щоб передати слухачам інформацію про зміну стану сторінки. Ви можете виявити подію і виконати деякі дії або нічого не виконувати. Наприклад, якщо ваш веб-додаток програє відео, він може поставити відео на паузу, коли користувач переміщує вкладку у фоновий режим, і відновити відтворення, коли користувач повернеться до цієї вкладки. Користувач не втрачає миті у відео, звук відео не заважає аудіо в новій вкладці на передньому плані, і користувач не пропустить жодного моменту в них.

- -

Стан видимості {{HTMLElement ("iframe")}} збігаються зі станом батьківського документа. Приховування <iframe> за допомогою властивостей CSS (таких як {{cssxref ("display", "display: none;")}}) не викликає подій видимості і не змінює стан документа, що міститься в кадрі.

- -

Випадки використання

- -

Розглянемо декілька прикладів використання API видимості сторінки.

- - - -

Розробники у минулому використовували недосконалі проксі для виявлення цього. Наприклад, перегляд {{event("blur")}} і {{event("focus")}} подій на вікні допомагає зрозуміти, коли ваша сторінка не є активною, але не говорить про те, що ваша сторінка насправді прихована для користувача. API Видимість сторінки вирішує цю проблему.

- -
-

Примітка: У той час як {{domxref ("GlobalEventHandlers.onblur", "onblur")}} та {{domxref ("GlobalEventHandlers.onfocus", "onfocus")}} скажуть вам, коли користувач перемикає вікно, але це не обов'язково означає, що воно приховано. Сторінки стають прихованими тільки тоді, коли користувач перемикає вкладки або згортає вікно браузера, що містить вкладку.

-
- -

Політика позиціонування, як сприяння продуктивності фонової сторінки

- -

Окремо від API відображення сторінки агенти  користувача зазвичай мають ряд власних політик для зниження впливу продуктивності фонових або прихованих вкладок. Вони можуть включати в себе:

- - - -

Деякі процеси виключені з цього гасящего режиму. У цих випадках ви також можете використовувати API видимості сторінки, щоб зменшити вплив на продуктивність.

- - - -

Приклад

- -

Подивіться живий приклад (відео зі звуком).

- -

Приклад, який призупиняє перегляд відео під час перемиканні на іншу вкладку і відтворює його знову при поверненні на цю вкладку, був створений за таким кодом:

- -
   // Встановіть ім'я властивості hidden і події зміни для видимості.
-
-var hidden, visibilityChange;
-if (typeof document.hidden !== "undefined") { // Opera 12.10 і Firefox 18 і більше пізніша підтримка
-  hidden = "hidden";
-  visibilityChange = "visibilitychange";
-} else if (typeof document.msHidden !== "undefined") {
-  hidden = "msHidden";
-  visibilityChange = "msvisibilitychange";
-} else if (typeof document.webkitHidden !== "undefined") {
-  hidden = "webkitHidden";
-  visibilityChange = "webkitvisibilitychange";
-}
-
-var videoElement = document.getElementById("videoElement");
-
-// Якщо сторінка прихована, зупиніть відео;
-// Якщо сторінка відображається, відтворіть відеозображення;
-
-function handleVisibilityChange() {
-  if (document[hidden]) {
-    videoElement.pause();
-  } else {
-    videoElement.play();
-  }
-}
-
-      // Попереджаємо, якщо браузер не підтримує addEventListener або Page Visibility API
-if (typeof document.addEventListener === "undefined" || hidden === undefined) {
-  console.log("Для цього демонстрування потрібен браузер, наприклад, Google Chrome або Firefox, який підтримує API для перегляду сторінок.");
-} else {
-      // Зміна видимості сторінки
-  document.addEventListener(visibilityChange, handleVisibilityChange, false);
-
-     // Коли відео призупиняється, встановлюємо назву.
-     // Це свідчитеме про паузу.
-  videoElement.addEventListener("pause", function(){
-      document.title = 'Paused';
-  }, false);
-
-  // Коли відео відтворюється, встановлюємо назву.
-  videoElement.addEventListener("play", function(){
-      document.title = 'Playing';
-  }, false);
-
-}
-
- -

Властивості, використані в інтерфейсі документа

- -

API Видимість сторінки додає наступні властивості до інтерфейсу {{domxref("Document")}} :

- -
-
{{domxref("Document.hidden")}} {{ReadOnlyInline}}
-
Повертає true , якщо сторінка знаходиться в стані, яке вважається прихованим для користувача, і false якщо навпаки.
-
{{domxref("Document.visibilityState")}} {{ReadOnlyInline}}
-
 {{domxref ("DOMString")}} вказує на поточний стан видимості документа. Можливі значення: -
-
visible
-
Зміст сторінки може бути, принаймні, частково видимим. На практиці це означає, що сторінка є закладкою на передньому плані немінімізірованного вікна.
-
hidden
-
Вміст сторінки не видно користувачеві або через те, що вкладка документа знаходиться в фоновому режимі, або через те, що частина вікна прихована, або через те, що екран пристрою вимкнений.
-
prerender
-
Вміст сторінки є попередніми і невидимим для користувача. Документ може буті в стані попереднього завантаження. -
Примітка: Не всі браузери підтримують попереднє завантаження.
-
-
unloaded
-
Сторінка перебуває в процесі вивантаження з пам'яті. -
Примітка: Не всі браузери підтримують це значення.
-
-
-
-
{{domxref("Document.onvisibilitychange")}}
-
 {{domxref("EventListener")}} задає код, який буде викликатися при виникненні події {{event("visibilitychange")}} .
-
- -
//startSimulation та pauseSimulation визначені в іншому місці
-function handleVisibilityChange() {
-  if (document.hidden) {
-    pauseSimulation();
-  } else  {
-    startSimulation();
-  }
-}
-
-document.addEventListener("visibilitychange", handleVisibilityChange, false);
-
- -

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

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Page Visibility API')}}{{Spec2('Page Visibility API')}}Початкове значення.
- -

Працює з браузерами

- -
-

Document.visibilityState

- -
- - -

{{Compat("api.Document.visibilityState")}}

-
-
- -

Дивись також

- - diff --git a/files/uk/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html b/files/uk/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html new file mode 100644 index 0000000000..cb7b8b615b --- /dev/null +++ b/files/uk/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html @@ -0,0 +1,108 @@ +--- +title: Чутливі ділянки та доступність +slug: Web/API/Canvas_API/Tutorial/Чутливі_ділянки_та_доступність +tags: + - Canvas + - Графіка + - Полотно + - Підручник +translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility +--- +
{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
+ +
Власне HTML-елемент {{HTMLElement("canvas")}} являє собою лише множину кольорових точок і не містить жодних відомостей про намальовані об'єкти. Вміст полотна жодним чином не розкривається інструментам доступності, як це передбачено для семантичного HTML. Тож загалом, слід уникати використання полотен в застосунках або сайтах, від яких вимагається підтримка доступності. Проте наведені нижче настанови допоможуть все ж дещо уприступнити вміст полотен.
+ +

Запасний вміст

+ +

Вміст між тегами <canvas> … </canvas> може відігравати роль запасного варіанту для тих {{glossary("Browser", "переглядачів")}}, що не мають підтримки полотен. Він також вельми корисний тоді, коли користувач потребує допоміжних засобів (як-от екранний диктор), які можуть читати дерево DOM всередині. Чудовий приклад з html5accessibility.com показує, як це можна здійснити:

+ +
<canvas>
+  <h2>Shapes</h2>
+  <p>A rectangle with a black border.
+   In the background is a pink circle.
+   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>.
+   Partially overlaying the circle is a green
+   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a>
+   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
+   both of which are semi-opaque, so the full circle can be seen underneath.</p>
+</canvas>
+ +

Перегляньте відео від Стіва Фолкнера про те, як екранний диктор NVDA читає цей приклад.

+ +

Правила ARIA

+ +

Accessible Rich Internet Applications (ARIA) визначає способи того, як зробити веб-застосунки та вміст доступнішими для людей з певними вадами. Можна вжити ARIA-атрибути для описання поведінки й призначення HTML-елемента полотна:

+ +
<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
+
+ +

Дивіться ARIA та Використання ARIA, щоб дізнатись більше.

+ +

Чутливі ділянки

+ +

Однією з поширених задач є з'ясування того, чи належать координати миші до певної ділянки на полотні. Відповідний API уможливлює створення певних чутливих ділянок на полотні та дає інші можливості розкрити взаємодіяльний вміст полотна інструментам доступності. Він дозволяє полегшити виявлення влучень (належності координат миші певній ділянці) та доправити відповідні події до елементів DOM. Цей API має такі три методи (досі лишаються дослідними в сучасних переглядачах, тож перевіряйте таблиці сумісності):

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
Створює чутливу ділянку на полотні.
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
Видаляє з полотна чутливу ділянку із зазначеним id .
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
Видаляє з полотна всі чутливі ділянки.
+
+ +

Створюючи новий контур з допомогою {{domxref("CanvasRenderingContext2D.beginPath()")}} можна перетворити його на чутливу ділянку, а тоді, перевіряючи значення властивості {{domxref("MouseEvent.region")}}, з'ясовувати, чи влучає миша у вказану область:

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
+ctx.fill();
+ctx.addHitRegion({id: 'circle'});
+
+canvas.addEventListener('mousemove', function(event) {
+  if (event.region) {
+    console.log('Влучив у ділянку: ' + event.region);  // Влучив у ділянку: circle
+  }
+});
+
+ +

Крім того, метод addHitRegion() може також приймати параметр control, що вказує елемент (має бути нащадком елемента canvas), до якого доправлятимуться події:

+ +
ctx.addHitRegion({control: element});
+ +

Наприклад, це може стати в нагоді для доправлення подій до елементів {{HTMLElement("input")}}.

+ +

Облямівки фокуса

+ +

Для роботи з клавіатури, облямівки фокуса є зручними індикаторами, що полегшують пересування сторінкою. Щоб намалювати облямівку фокуса навколо малюнка (контура) на полотні, можна скористатися методом drawFocusIfNeeded().

+ +
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}
+
Якщо відповідний елемент перебуває у фокусі, цей метод намалює облямівку навколо контура.
+
+ +

Крім того, можна використати метод scrollPathIntoView(), щоб зробити елемент видимим на екрані, якщо він перебуває у фокусі, наприклад.

+ +
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}
+
Гортає поточний чи вказаний контур до видимої області.
+
+ +

Див. також

+ + + +
{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
diff --git "a/files/uk/web/api/canvas_api/tutorial/\321\207\321\203\321\202\320\273\320\270\320\262\321\226_\320\264\321\226\320\273\321\217\320\275\320\272\320\270_\321\202\320\260_\320\264\320\276\321\201\321\202\321\203\320\277\320\275\321\226\321\201\321\202\321\214/index.html" "b/files/uk/web/api/canvas_api/tutorial/\321\207\321\203\321\202\320\273\320\270\320\262\321\226_\320\264\321\226\320\273\321\217\320\275\320\272\320\270_\321\202\320\260_\320\264\320\276\321\201\321\202\321\203\320\277\320\275\321\226\321\201\321\202\321\214/index.html" deleted file mode 100644 index cb7b8b615b..0000000000 --- "a/files/uk/web/api/canvas_api/tutorial/\321\207\321\203\321\202\320\273\320\270\320\262\321\226_\320\264\321\226\320\273\321\217\320\275\320\272\320\270_\321\202\320\260_\320\264\320\276\321\201\321\202\321\203\320\277\320\275\321\226\321\201\321\202\321\214/index.html" +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Чутливі ділянки та доступність -slug: Web/API/Canvas_API/Tutorial/Чутливі_ділянки_та_доступність -tags: - - Canvas - - Графіка - - Полотно - - Підручник -translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility ---- -
{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
- -
Власне HTML-елемент {{HTMLElement("canvas")}} являє собою лише множину кольорових точок і не містить жодних відомостей про намальовані об'єкти. Вміст полотна жодним чином не розкривається інструментам доступності, як це передбачено для семантичного HTML. Тож загалом, слід уникати використання полотен в застосунках або сайтах, від яких вимагається підтримка доступності. Проте наведені нижче настанови допоможуть все ж дещо уприступнити вміст полотен.
- -

Запасний вміст

- -

Вміст між тегами <canvas> … </canvas> може відігравати роль запасного варіанту для тих {{glossary("Browser", "переглядачів")}}, що не мають підтримки полотен. Він також вельми корисний тоді, коли користувач потребує допоміжних засобів (як-от екранний диктор), які можуть читати дерево DOM всередині. Чудовий приклад з html5accessibility.com показує, як це можна здійснити:

- -
<canvas>
-  <h2>Shapes</h2>
-  <p>A rectangle with a black border.
-   In the background is a pink circle.
-   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>.
-   Partially overlaying the circle is a green
-   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a>
-   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
-   both of which are semi-opaque, so the full circle can be seen underneath.</p>
-</canvas>
- -

Перегляньте відео від Стіва Фолкнера про те, як екранний диктор NVDA читає цей приклад.

- -

Правила ARIA

- -

Accessible Rich Internet Applications (ARIA) визначає способи того, як зробити веб-застосунки та вміст доступнішими для людей з певними вадами. Можна вжити ARIA-атрибути для описання поведінки й призначення HTML-елемента полотна:

- -
<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
-
- -

Дивіться ARIA та Використання ARIA, щоб дізнатись більше.

- -

Чутливі ділянки

- -

Однією з поширених задач є з'ясування того, чи належать координати миші до певної ділянки на полотні. Відповідний API уможливлює створення певних чутливих ділянок на полотні та дає інші можливості розкрити взаємодіяльний вміст полотна інструментам доступності. Він дозволяє полегшити виявлення влучень (належності координат миші певній ділянці) та доправити відповідні події до елементів DOM. Цей API має такі три методи (досі лишаються дослідними в сучасних переглядачах, тож перевіряйте таблиці сумісності):

- -
-
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
-
Створює чутливу ділянку на полотні.
-
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
-
Видаляє з полотна чутливу ділянку із зазначеним id .
-
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
-
Видаляє з полотна всі чутливі ділянки.
-
- -

Створюючи новий контур з допомогою {{domxref("CanvasRenderingContext2D.beginPath()")}} можна перетворити його на чутливу ділянку, а тоді, перевіряючи значення властивості {{domxref("MouseEvent.region")}}, з'ясовувати, чи влучає миша у вказану область:

- -

HTML

- -
<canvas id="canvas"></canvas>
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.beginPath();
-ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
-ctx.fill();
-ctx.addHitRegion({id: 'circle'});
-
-canvas.addEventListener('mousemove', function(event) {
-  if (event.region) {
-    console.log('Влучив у ділянку: ' + event.region);  // Влучив у ділянку: circle
-  }
-});
-
- -

Крім того, метод addHitRegion() може також приймати параметр control, що вказує елемент (має бути нащадком елемента canvas), до якого доправлятимуться події:

- -
ctx.addHitRegion({control: element});
- -

Наприклад, це може стати в нагоді для доправлення подій до елементів {{HTMLElement("input")}}.

- -

Облямівки фокуса

- -

Для роботи з клавіатури, облямівки фокуса є зручними індикаторами, що полегшують пересування сторінкою. Щоб намалювати облямівку фокуса навколо малюнка (контура) на полотні, можна скористатися методом drawFocusIfNeeded().

- -
-
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}
-
Якщо відповідний елемент перебуває у фокусі, цей метод намалює облямівку навколо контура.
-
- -

Крім того, можна використати метод scrollPathIntoView(), щоб зробити елемент видимим на екрані, якщо він перебуває у фокусі, наприклад.

- -
-
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}
-
Гортає поточний чи вказаний контур до видимої області.
-
- -

Див. також

- - - -
{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
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';
+}
+
+ +

Читати також

+ + diff --git a/files/uk/web/api/htmlmediaelement/abort_event/index.html b/files/uk/web/api/htmlmediaelement/abort_event/index.html new file mode 100644 index 0000000000..40a9e144fc --- /dev/null +++ b/files/uk/web/api/htmlmediaelement/abort_event/index.html @@ -0,0 +1,68 @@ +--- +title: abort +slug: Web/Events/abort +translation_of: Web/API/HTMLMediaElement/abort_event +translation_of_original: Web/Events/abort +--- +

Подія abort спрацьовує коли завантаження ресурсу було перервано.

+ +

Загальна інформація

+ +
+
Специфікація
+
DOM L3
+
Interface
+
UIEvent if generated from a user interface, Event otherwise.
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
Element
+
Default Action
+
None
+
+ +

Властивості

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
diff --git a/files/uk/web/api/page_visibility_api/index.html b/files/uk/web/api/page_visibility_api/index.html new file mode 100644 index 0000000000..6675a3783b --- /dev/null +++ b/files/uk/web/api/page_visibility_api/index.html @@ -0,0 +1,201 @@ +--- +title: API відображення сторінки +slug: Web/API/API_відображення_сторінки +tags: + - API + - API відображення сторінки + - visibilityState + - visibilitychange + - відображення сторінки + - процеси скритої закладки + - фоновий режим +translation_of: Web/API/Page_Visibility_API +--- +
{{DefaultAPISidebar("Page Visibility API")}}
+ +
+ +

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

+ +
+

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

+
+ +

Коли користувач згортає вікно або перемикається на іншу вкладку, API посилає подію {{event("visibilitychange")}}, щоб передати слухачам інформацію про зміну стану сторінки. Ви можете виявити подію і виконати деякі дії або нічого не виконувати. Наприклад, якщо ваш веб-додаток програє відео, він може поставити відео на паузу, коли користувач переміщує вкладку у фоновий режим, і відновити відтворення, коли користувач повернеться до цієї вкладки. Користувач не втрачає миті у відео, звук відео не заважає аудіо в новій вкладці на передньому плані, і користувач не пропустить жодного моменту в них.

+ +

Стан видимості {{HTMLElement ("iframe")}} збігаються зі станом батьківського документа. Приховування <iframe> за допомогою властивостей CSS (таких як {{cssxref ("display", "display: none;")}}) не викликає подій видимості і не змінює стан документа, що міститься в кадрі.

+ +

Випадки використання

+ +

Розглянемо декілька прикладів використання API видимості сторінки.

+ + + +

Розробники у минулому використовували недосконалі проксі для виявлення цього. Наприклад, перегляд {{event("blur")}} і {{event("focus")}} подій на вікні допомагає зрозуміти, коли ваша сторінка не є активною, але не говорить про те, що ваша сторінка насправді прихована для користувача. API Видимість сторінки вирішує цю проблему.

+ +
+

Примітка: У той час як {{domxref ("GlobalEventHandlers.onblur", "onblur")}} та {{domxref ("GlobalEventHandlers.onfocus", "onfocus")}} скажуть вам, коли користувач перемикає вікно, але це не обов'язково означає, що воно приховано. Сторінки стають прихованими тільки тоді, коли користувач перемикає вкладки або згортає вікно браузера, що містить вкладку.

+
+ +

Політика позиціонування, як сприяння продуктивності фонової сторінки

+ +

Окремо від API відображення сторінки агенти  користувача зазвичай мають ряд власних політик для зниження впливу продуктивності фонових або прихованих вкладок. Вони можуть включати в себе:

+ + + +

Деякі процеси виключені з цього гасящего режиму. У цих випадках ви також можете використовувати API видимості сторінки, щоб зменшити вплив на продуктивність.

+ + + +

Приклад

+ +

Подивіться живий приклад (відео зі звуком).

+ +

Приклад, який призупиняє перегляд відео під час перемиканні на іншу вкладку і відтворює його знову при поверненні на цю вкладку, був створений за таким кодом:

+ +
   // Встановіть ім'я властивості hidden і події зміни для видимості.
+
+var hidden, visibilityChange;
+if (typeof document.hidden !== "undefined") { // Opera 12.10 і Firefox 18 і більше пізніша підтримка
+  hidden = "hidden";
+  visibilityChange = "visibilitychange";
+} else if (typeof document.msHidden !== "undefined") {
+  hidden = "msHidden";
+  visibilityChange = "msvisibilitychange";
+} else if (typeof document.webkitHidden !== "undefined") {
+  hidden = "webkitHidden";
+  visibilityChange = "webkitvisibilitychange";
+}
+
+var videoElement = document.getElementById("videoElement");
+
+// Якщо сторінка прихована, зупиніть відео;
+// Якщо сторінка відображається, відтворіть відеозображення;
+
+function handleVisibilityChange() {
+  if (document[hidden]) {
+    videoElement.pause();
+  } else {
+    videoElement.play();
+  }
+}
+
+      // Попереджаємо, якщо браузер не підтримує addEventListener або Page Visibility API
+if (typeof document.addEventListener === "undefined" || hidden === undefined) {
+  console.log("Для цього демонстрування потрібен браузер, наприклад, Google Chrome або Firefox, який підтримує API для перегляду сторінок.");
+} else {
+      // Зміна видимості сторінки
+  document.addEventListener(visibilityChange, handleVisibilityChange, false);
+
+     // Коли відео призупиняється, встановлюємо назву.
+     // Це свідчитеме про паузу.
+  videoElement.addEventListener("pause", function(){
+      document.title = 'Paused';
+  }, false);
+
+  // Коли відео відтворюється, встановлюємо назву.
+  videoElement.addEventListener("play", function(){
+      document.title = 'Playing';
+  }, false);
+
+}
+
+ +

Властивості, використані в інтерфейсі документа

+ +

API Видимість сторінки додає наступні властивості до інтерфейсу {{domxref("Document")}} :

+ +
+
{{domxref("Document.hidden")}} {{ReadOnlyInline}}
+
Повертає true , якщо сторінка знаходиться в стані, яке вважається прихованим для користувача, і false якщо навпаки.
+
{{domxref("Document.visibilityState")}} {{ReadOnlyInline}}
+
 {{domxref ("DOMString")}} вказує на поточний стан видимості документа. Можливі значення: +
+
visible
+
Зміст сторінки може бути, принаймні, частково видимим. На практиці це означає, що сторінка є закладкою на передньому плані немінімізірованного вікна.
+
hidden
+
Вміст сторінки не видно користувачеві або через те, що вкладка документа знаходиться в фоновому режимі, або через те, що частина вікна прихована, або через те, що екран пристрою вимкнений.
+
prerender
+
Вміст сторінки є попередніми і невидимим для користувача. Документ може буті в стані попереднього завантаження. +
Примітка: Не всі браузери підтримують попереднє завантаження.
+
+
unloaded
+
Сторінка перебуває в процесі вивантаження з пам'яті. +
Примітка: Не всі браузери підтримують це значення.
+
+
+
+
{{domxref("Document.onvisibilitychange")}}
+
 {{domxref("EventListener")}} задає код, який буде викликатися при виникненні події {{event("visibilitychange")}} .
+
+ +
//startSimulation та pauseSimulation визначені в іншому місці
+function handleVisibilityChange() {
+  if (document.hidden) {
+    pauseSimulation();
+  } else  {
+    startSimulation();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
+ +

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

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Page Visibility API')}}{{Spec2('Page Visibility API')}}Початкове значення.
+ +

Працює з браузерами

+ +
+

Document.visibilityState

+ +
+ + +

{{Compat("api.Document.visibilityState")}}

+
+
+ +

Дивись також

+ + diff --git a/files/uk/web/api/window/domcontentloaded_event/index.html b/files/uk/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..96ca54cfb0 --- /dev/null +++ b/files/uk/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,152 @@ +--- +title: DOMContentLoaded +slug: Web/Events/DOMContentLoaded +translation_of: Web/API/Window/DOMContentLoaded_event +--- +

Подія DOMContentLoaded викликається, коли вихідний HTML документ повністю завантажився та був розібраний (parse), без очікування повного завантаження стилів, зображень, сабфреймів (subframes). Зовсім інша подія - load - має використовуватися лише для того, щоб визначити повне завантаження сторінки. Використання load там, де застосування DOMContentLoaded є більш доречним, є дуже поширеною помилкою, тому будьте уважними.

+ +

{{Note("Синхронний Javascript затримує парсинг DOM.")}}

+ +

{{Note("Існує безліч універсальних та автономних бібліотек, які  попонують кроссбраузерні методи для визначення готовності DOM.")}}

+ +

Прискорення

+ +

Якщо ви хочете, щоб DOM був розібраним (got parsed) якомога швидше після того, як користувач зробив запит сторінки, ви можете зробити ваш JavaScript асинхронним та оптимізувати завантаження стилів. Якщо цього не зробити, це сповільнить завантаження сторінки через те, що воно буде відбуватися паралельно і марнувати трафік у головного html документа.

+ +

Основна інформація

+ +
+
Специфікація
+
HTML5
+
Інтерфейс
+
Подія
+
Спливання
+
Так
+
Можливість скасування
+
Так (однак скасування як простої події скасувати не можна)
+
 
+
 
+
 
+
 
+
Ціль
+
Документ
+
Типова дія
+
Немає.
+
+ +

Властивості

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВластивістьТипОпис
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Приклад

+ +
<script>
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM fully loaded and parsed");
+  });
+</script>
+
+ +
<script>
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM fully loaded and parsed");
+  });
+
+for(var i=0; i<1000000000; i++)
+{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
+</script>
+
+ +

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

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0[1]{{CompatGeckoDesktop("1")}}[1]9.0[2]9.03.1[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}[1]{{CompatGeckoMobile("1")}}[1]{{CompatUnknown}}[2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
+
+ +

[1] Bubbling для цієї події підтримується принаймні Gecko 1.9.2, Chrome 6, and Safari 4.

+ +

[2] Internet Explorer 8 підтримує подію readystatechange , яка може використовуватися для того, щоб визначити чи готовий DOM. У більш ранніх версіях Internet Explorer цей стан може бути визначений повторними спробами виконання document.documentElement.doScroll("left");,  так як цей фрагмент коду буде генерувати помилку, поки DOM не буде готовий.

+ +

Подібні події

+ + diff --git a/files/uk/web/api/windoworworkerglobalscope/settimeout/index.html b/files/uk/web/api/windoworworkerglobalscope/settimeout/index.html new file mode 100644 index 0000000000..19c90148ce --- /dev/null +++ b/files/uk/web/api/windoworworkerglobalscope/settimeout/index.html @@ -0,0 +1,428 @@ +--- +title: WindowTimers.setTimeout() +slug: Web/API/WindowTimers/setTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +
{{APIRef("HTML DOM")}}
+ +
 
+ +
Метод setTimeout(), що належить об'єкту {{domxref("WindowOrWorkerGlobalScope")}}, та наслідується від window.setTimeout,  встановлює таймер, що виконує функцію або вказаний фрагмент коду один раз, щойно спливе заданий час.
+ +
 
+ +

Синтаксис

+ +
var timeoutID = window.setTimeout(func[, delay, param1, param2, ...]);
+var timeoutID = window.setTimeout(code[, delay]);
+
+ +

Параметри

+ +
+
func
+
{{jsxref("function")}} котру необхідно виконати після того, як вийде заданий час.
+
code
+
Опційний синтаксис, котрий дозволяє задавати рядок замість функції, котра компілюється і виконується при спрацюванні таймера. Використання цього синтаксису не рекомендовано з тих же ж причин, котрі роблять застосування {{jsxref("eval()")}} загрозою безпеці.
+
delay {{optional_inline}}
+
 
+
Час у мілісекундах (тисячних секунди), котрий таймер має зачекати перед тим, як виконати вказану функцію або код. Якщо цей параметр пропустити, буде використано значення 0. Варто зазначити, що справжній час затримки, може бути довшим. Дивіться розділ {{anch("Reasons for delays longer than specified","Причини, з яких затримка є фактично довшою ніж задано")}}
+
param1, ..., paramN {{optional_inline}}
+
Додаткові параметри, що передаються до func або code, щойно час таймера спливе.
+
+ +
+

Зверніть увагу:  Internet Explorer 9 та більш ранні версії не підтримують додаткові параметри. Застосовуйте поліфіл, щобл уможливити цей функціонал (див. розділ Callback arguments).  

+
+ +

Значення, що повертається

+ +


+ Після виклику setTimeout(), повертається timeoutID  - це не нульове цифрове значення, що використовується для ідентифікації створеного таймера. Цей ідентифікатор можна передати як параметр до {{domxref("Window.clearTimeout()")}} щоб відмінити таймер.

+ +

Корисно знати, що setTimeout() та {{domxref("WindowTimers.setInterval", "setInterval()")}} використовують спільну колекцію ID ідентифікаторів, а також що  clearTimeout() та {{domxref("WindowTimers.clearInterval", "clearInterval()")}} технічно можуть бути взаємозамінними. Тим не менше, задля ясності, варто завжди зіставляти їх, аби не допускати помилок під час розробки коду. 

+ +

Приклад

+ +

У наступному прикладі створено дві кнопки на веб сторінці, що прив'язані до setTimeout() та clearTimeout() процесів. Після натискання на першу кнопку встановлюється таймер, що викликає діалогове вікно alert через дві секунди та зберігає ID таймера для подальшого використання у clearTimeout(). За бажанням ви можете відмінити цей таймер, якщо натисните другу кнопку.

+ +

HTML код

+ +
<p>Live Example</p>
+<button onclick="delayedAlert();">Відобразити діалогове вікно alert через дві секунди.</button>
+<p></p>
+<button onclick="clearAlert();">Відмінити відображення діалогового вікна.</button>
+
+ +

JavaScript код

+ +
var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("Це було дійсно повільно!");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+
+ +

Результат

+ +

{{EmbedLiveSample('Example', 'Приклад')}}

+ +

Дивіться також clearTimeout() example.

+ +

Поліфіл

+ +

Якщо вам необхідно передати один чи декілька аргументів до колбек функції, а також потрібно, щоб цей функціонал працював у браузерах, що не підтримують передачу додаткових аргументів для setTimeout() чи setInterval() (наприклад, версії Internet Explorer 9 чи нижче), ви можете застосувати цей поліфіл, який активує стандартну HTML5 функціональність. Просто додайте цей код на початку вашого скрипта: 

+ +
/*\
+|*|
+|*|  Polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+(function() {
+  setTimeout(function(arg1) {
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeST__ = window.setTimeout;
+    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeST__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+
+  var interval = setInterval(function(arg1) {
+    clearInterval(interval);
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeSI__ = window.setInterval;
+    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeSI__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+}())
+
+ +

Фікс для IE

+ +

Якщо вам потрібен фікс, який не впливатиме на роботу жодного іншого мобільного чи десктопного браузера, окрім IE9 та нижче, ви можете скористатись умовними коментарями JavaScript:

+ +
/*@cc_on
+  // conditional IE < 9 only fix
+  @if (@_jscript_version <= 9)
+  (function(f){
+     window.setTimeout=f(window.setTimeout);
+     window.setInterval=f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
+  @end
+@*/
+
+ +

Або використати умовні коментарі HTML для IE9 та нижче:

+ +
<!--[if lte IE 9]><script>
+(function(f){
+window.setTimeout=f(window.setTimeout);
+window.setInterval=f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
+});
+</script><![endif]-->
+
+ +

Тимчасові рішення

+ +

Ще одне можливе рішення - використання анонімної функції для виклику колбека, але це вартісне рішення. Приклад:

+ +
var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
+
+ +

Приклад, наведений вище, може бути також написаний за допомогою   arrow function:

+ +
var intervalID = setTimeout(() => { myFunc("one", "two", "three"); }, 1000);
+
+ +

Ще одне рішення - використання   function's bind. Приклад:

+ +
setTimeout(function(arg1){}.bind(undefined, 10), 1000);
+
+ +

Проблема "this"

+ +

Коли ви передаєте до setTimeout() метод або будь-яку іншу функцію, ймовірно вона буде викликана не з тим значенням this, на яке ви очікуєте. Ця проблема детально описана у JavaScript reference.

+ +

Пояснення

+ +

Код, що виконується всередині setTimeout(), викликається із  іншого контекста виконання (execution context), ніж у функції, яка викликала setTimeout. До функції, яку викликають всередині setTimeout застосовуються звичайні правила призначення this. І, якщо ви не встановили this під час виклику або за допомогою bind, його значенням за замовчуванням буде об'єкт  global (або window) у нестрогому режимі, або undefined у строгому режимі. Значення this буде іншим, аніж у функції, яка викликала setTimeout. Розгляньте наступний приклад:

+ +
myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"
+ +

Приклад вище працює тому, що myMethod викликано, як метод масиву myArray. Тому його this дорівнює myArray, а значення this[sProperty] всередині метода дорівнює myArray[sProperty]. Тим не менше, у наступному прикладі:

+ +
setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
+setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1.5 seconds
+ +

Метод myArray.myMethod передано до setTimeout, як звичайну функцію, якій не задано значення this. І коли вона викликається, її this за замовчуванням дорівнює об'єкту window. У  setTimeout неможливо передати this аргументом, як, наприклад, у методи Array (forEach, reduce, тощо), або через використання  call, як показано у прикладі нижче:

+ +
setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
+
+ +

Можливі рішення

+ +

Типовий спосіб вирішення цієї проблеми - використання функції обгортки, яка встановлює this із необхідним значенням: 

+ +
setTimeout(function(){myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout(function(){myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds
+ +

Стрілочна функція також є прийнятною альтернативою:

+ +
setTimeout(() => {myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout(() => {myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds
+ +

Ще одне можливе рішення проблеми this - замінити нативні глобальні функції setTimeout() та setInterval() кастомними функціями, які можуть приймати об'єкт this і застосовувати його у колбек функції, використовуючи  Function.prototype.call. Наприклад: 

+ +
// Enable setting 'this' in JavaScript timers
+
+var __nativeST__ = window.setTimeout,
+    __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this,
+      aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this,
+      aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+ +
Зверніть увагу:  Подібний підхід дозволяє передавати будь-яку кількість аргументів у колбек функцію таймерів навіть для IE. Таким чином, цей спосіб може також бути використаний як поліфіл. Перегляньте параграф Callback arguments .
+ +

Випробування нового підхода:

+ +
myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
+
+ +
Зверніть увагу:  JavaScript 1.8.5 впровадив метод   Function.prototype.bind(), який встановлює значення this для кожного виклику вказаної функції. Це допомагає уникнути використання функції обгортки для призначення this колбека.
+ +

Приклад використання bind():

+ +
myArray = ["zero", "one", "two"];
+myBoundMethod = (function (sProperty) {
+    console.log(arguments.length > 0 ? this[sProperty] : this);
+}).bind(myArray);
+
+myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function
+myBoundMethod(1); // prints "one"
+setTimeout(myBoundMethod, 1000); // still prints "zero,one,two" after 1 second because of the binding
+setTimeout(myBoundMethod, 1500, "1"); // prints "one" after 1.5 seconds
+
+ +

Примітки

+ +

Таймер можна скасувати за допомогою {{domxref("Window.clearTimeout()")}}. Щоб викликати функцію повторно (наприклад, через кожні N мілісекунди), використовуйте  {{domxref("Window.setInterval()")}}.

+ +

Важливо пам'ятати, що функція або фрагмент коду не можуть бути виконані, допоки не буде завершено поток функції, яка викликала setTimeout(). Наприклад. 

+ +
function foo(){
+  console.log('foo has been called');
+}
+setTimeout(foo, 0);
+console.log('After setTimeout');
+ +

Виведе в консоль:

+ +
After setTimeout
+foo has been called
+ +

Тому що, навіть не зважаючи на те, що setTimeout було викликано із нульовою затримкою, вона переміщується у чергу і її виконання відбудеться у найближчому наступному циклі, тобто не відразу. Код, що в данний момент виконується, повинен бути завершений. Тільки після цього функції, переміщені в чергу, будуть виконані. Тому порядок виконання може бути іншим, аніж очікувалось.

+ +

Passing string literals

+ +

Passing a string instead of a function to setTimeout() suffers from the same hazards as using eval.

+ +
// Recommended
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// Not recommended
+window.setTimeout("alert('Hello World!');", 500);
+
+ +

A string passed to setTimeout is evaluated in the global context, so local symbols in the context where setTimeout() was called will not be available when the string is evaluated as code.

+ +

Причини чому затримка є фактично довшою ніж вказано

+ +

There are a number of reasons why a timeout may take longer to fire than anticipated. This section describes the most common reasons.

+ +

Nested timeouts forced to >=4ms

+ +

Historically browsers implement setTimeout() "clamping": successive setTimeout() calls with delay smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, DOM_MIN_TIMEOUT_VALUE, is 4 ms (stored in a preference in Firefox: dom.min_timeout_value), with a DOM_CLAMP_TIMEOUT_NESTING_LEVEL of 5.

+ +

In fact, 4 ms is specified by the HTML5 spec and is consistent across browsers released in 2010 and onward. Prior to {{geckoRelease("5.0")}}, the minimum timeout value for nested timeouts was 10 ms.

+ +

To implement a 0 ms timeout in a modern browser, you can use {{domxref("window.postMessage()")}} as described here.

+ +

Timeouts in inactive tabs clamped to >=1000ms

+ +

To reduce the load (and associated battery usage) from background tabs, timeouts are often clamped to firing no more often than once per second (1000 ms) in inactive tabs.

+ +

Firefox implements this behavior since version 5 (see {{bug(633421)}}, the 1000ms constant can be tweaked through the dom.min_background_timeout_value preference). Chrome implements this behavior since version 11 (crbug.com/66078).

+ +

Firefox for Android uses a timeout value of 15 minutes for background tabs since {{bug(736602)}} in Firefox 14, and background tabs can also be unloaded entirely.

+ +
+

Firefox 50 no longer throttles background tabs if a Web Audio API {{domxref("AudioContext")}} is actively playing sound. Firefox 51 further amends this such that background tabs are no longer throttled if an {{domxref("AudioContext")}} is present in the tab at all, even if no sound is being played. These resolve a number of issues with apps which play note-based music not being able to time or synchronize the music properly when the tab is in the background.

+
+ +

Late timeouts

+ +

In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks

+ +

Maximum delay value

+ +

Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed integer internally. This causes an integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}{{Spec2("HTML WHATWG")}}Initial definition (DOM Level 0)
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}4.04.01.0
Supports parameters for callback[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.01.0{{CompatGeckoMobile("1")}}6.06.01.0
Supports parameters for callback[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Whether it supports the optional parameters when in its first form or not.

+ +

See also

+ + diff --git a/files/uk/web/api/windowtimers/index.html b/files/uk/web/api/windowtimers/index.html deleted file mode 100644 index d28752bde7..0000000000 --- a/files/uk/web/api/windowtimers/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: WindowTimers -slug: Web/API/WindowTimers -tags: - - API - - HTML DOM - - Interface - - Intervals - - Mixin - - NeedsTranslation - - Reference - - Timers - - TopicStub - - Workers -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowTimers ---- -
{{APIRef("HTML DOM")}}
- -

WindowTimers is a mixin used to provide utility methods which set and clear timers. No objects of this type exist; instead, its methods are available on {{domxref("Window")}} for the standard browsing scope, or on {{domxref("WorkerGlobalScope")}} for workers.

- -

Properties

- -

This interface neither inherits nor provides any properties.

- -

Methods

- -

This interface does not inherit any methods. It offers the following methods.

- -
-
{{domxref("WindowTimers.clearInterval()")}}
-
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
-
{{domxref("WindowTimers.clearTimeout()")}}
-
Cancels the delayed execution set using {{domxref("WindowTimers.setTimeout()")}}.
-
{{domxref("WindowTimers.setInterval()")}}
-
Schedules a function to execute every time a given number of milliseconds elapses.
-
{{domxref("WindowTimers.setTimeout()")}}
-
Schedules a function to execute in a given amount of time.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}}1.04.04.01.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

 

- -

See also

- - diff --git a/files/uk/web/api/windowtimers/settimeout/index.html b/files/uk/web/api/windowtimers/settimeout/index.html deleted file mode 100644 index 19c90148ce..0000000000 --- a/files/uk/web/api/windowtimers/settimeout/index.html +++ /dev/null @@ -1,428 +0,0 @@ ---- -title: WindowTimers.setTimeout() -slug: Web/API/WindowTimers/setTimeout -translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout ---- -
{{APIRef("HTML DOM")}}
- -
 
- -
Метод setTimeout(), що належить об'єкту {{domxref("WindowOrWorkerGlobalScope")}}, та наслідується від window.setTimeout,  встановлює таймер, що виконує функцію або вказаний фрагмент коду один раз, щойно спливе заданий час.
- -
 
- -

Синтаксис

- -
var timeoutID = window.setTimeout(func[, delay, param1, param2, ...]);
-var timeoutID = window.setTimeout(code[, delay]);
-
- -

Параметри

- -
-
func
-
{{jsxref("function")}} котру необхідно виконати після того, як вийде заданий час.
-
code
-
Опційний синтаксис, котрий дозволяє задавати рядок замість функції, котра компілюється і виконується при спрацюванні таймера. Використання цього синтаксису не рекомендовано з тих же ж причин, котрі роблять застосування {{jsxref("eval()")}} загрозою безпеці.
-
delay {{optional_inline}}
-
 
-
Час у мілісекундах (тисячних секунди), котрий таймер має зачекати перед тим, як виконати вказану функцію або код. Якщо цей параметр пропустити, буде використано значення 0. Варто зазначити, що справжній час затримки, може бути довшим. Дивіться розділ {{anch("Reasons for delays longer than specified","Причини, з яких затримка є фактично довшою ніж задано")}}
-
param1, ..., paramN {{optional_inline}}
-
Додаткові параметри, що передаються до func або code, щойно час таймера спливе.
-
- -
-

Зверніть увагу:  Internet Explorer 9 та більш ранні версії не підтримують додаткові параметри. Застосовуйте поліфіл, щобл уможливити цей функціонал (див. розділ Callback arguments).  

-
- -

Значення, що повертається

- -


- Після виклику setTimeout(), повертається timeoutID  - це не нульове цифрове значення, що використовується для ідентифікації створеного таймера. Цей ідентифікатор можна передати як параметр до {{domxref("Window.clearTimeout()")}} щоб відмінити таймер.

- -

Корисно знати, що setTimeout() та {{domxref("WindowTimers.setInterval", "setInterval()")}} використовують спільну колекцію ID ідентифікаторів, а також що  clearTimeout() та {{domxref("WindowTimers.clearInterval", "clearInterval()")}} технічно можуть бути взаємозамінними. Тим не менше, задля ясності, варто завжди зіставляти їх, аби не допускати помилок під час розробки коду. 

- -

Приклад

- -

У наступному прикладі створено дві кнопки на веб сторінці, що прив'язані до setTimeout() та clearTimeout() процесів. Після натискання на першу кнопку встановлюється таймер, що викликає діалогове вікно alert через дві секунди та зберігає ID таймера для подальшого використання у clearTimeout(). За бажанням ви можете відмінити цей таймер, якщо натисните другу кнопку.

- -

HTML код

- -
<p>Live Example</p>
-<button onclick="delayedAlert();">Відобразити діалогове вікно alert через дві секунди.</button>
-<p></p>
-<button onclick="clearAlert();">Відмінити відображення діалогового вікна.</button>
-
- -

JavaScript код

- -
var timeoutID;
-
-function delayedAlert() {
-  timeoutID = window.setTimeout(slowAlert, 2000);
-}
-
-function slowAlert() {
-  alert("Це було дійсно повільно!");
-}
-
-function clearAlert() {
-  window.clearTimeout(timeoutID);
-}
-
- -

Результат

- -

{{EmbedLiveSample('Example', 'Приклад')}}

- -

Дивіться також clearTimeout() example.

- -

Поліфіл

- -

Якщо вам необхідно передати один чи декілька аргументів до колбек функції, а також потрібно, щоб цей функціонал працював у браузерах, що не підтримують передачу додаткових аргументів для setTimeout() чи setInterval() (наприклад, версії Internet Explorer 9 чи нижче), ви можете застосувати цей поліфіл, який активує стандартну HTML5 функціональність. Просто додайте цей код на початку вашого скрипта: 

- -
/*\
-|*|
-|*|  Polyfill which enables the passage of arbitrary arguments to the
-|*|  callback functions of JavaScript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-(function() {
-  setTimeout(function(arg1) {
-    if (arg1 === 'test') {
-      // feature test is passed, no need for polyfill
-      return;
-    }
-    var __nativeST__ = window.setTimeout;
-    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeST__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-
-  var interval = setInterval(function(arg1) {
-    clearInterval(interval);
-    if (arg1 === 'test') {
-      // feature test is passed, no need for polyfill
-      return;
-    }
-    var __nativeSI__ = window.setInterval;
-    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeSI__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-}())
-
- -

Фікс для IE

- -

Якщо вам потрібен фікс, який не впливатиме на роботу жодного іншого мобільного чи десктопного браузера, окрім IE9 та нижче, ви можете скористатись умовними коментарями JavaScript:

- -
/*@cc_on
-  // conditional IE < 9 only fix
-  @if (@_jscript_version <= 9)
-  (function(f){
-     window.setTimeout=f(window.setTimeout);
-     window.setInterval=f(window.setInterval);
-  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
-  @end
-@*/
-
- -

Або використати умовні коментарі HTML для IE9 та нижче:

- -
<!--[if lte IE 9]><script>
-(function(f){
-window.setTimeout=f(window.setTimeout);
-window.setInterval=f(window.setInterval);
-})(function(f){return function(c,t){
-var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
-});
-</script><![endif]-->
-
- -

Тимчасові рішення

- -

Ще одне можливе рішення - використання анонімної функції для виклику колбека, але це вартісне рішення. Приклад:

- -
var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
-
- -

Приклад, наведений вище, може бути також написаний за допомогою   arrow function:

- -
var intervalID = setTimeout(() => { myFunc("one", "two", "three"); }, 1000);
-
- -

Ще одне рішення - використання   function's bind. Приклад:

- -
setTimeout(function(arg1){}.bind(undefined, 10), 1000);
-
- -

Проблема "this"

- -

Коли ви передаєте до setTimeout() метод або будь-яку іншу функцію, ймовірно вона буде викликана не з тим значенням this, на яке ви очікуєте. Ця проблема детально описана у JavaScript reference.

- -

Пояснення

- -

Код, що виконується всередині setTimeout(), викликається із  іншого контекста виконання (execution context), ніж у функції, яка викликала setTimeout. До функції, яку викликають всередині setTimeout застосовуються звичайні правила призначення this. І, якщо ви не встановили this під час виклику або за допомогою bind, його значенням за замовчуванням буде об'єкт  global (або window) у нестрогому режимі, або undefined у строгому режимі. Значення this буде іншим, аніж у функції, яка викликала setTimeout. Розгляньте наступний приклад:

- -
myArray = ["zero", "one", "two"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length > 0 ? this[sProperty] : this);
-};
-
-myArray.myMethod(); // prints "zero,one,two"
-myArray.myMethod(1); // prints "one"
- -

Приклад вище працює тому, що myMethod викликано, як метод масиву myArray. Тому його this дорівнює myArray, а значення this[sProperty] всередині метода дорівнює myArray[sProperty]. Тим не менше, у наступному прикладі:

- -
setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
-setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1.5 seconds
- -

Метод myArray.myMethod передано до setTimeout, як звичайну функцію, якій не задано значення this. І коли вона викликається, її this за замовчуванням дорівнює об'єкту window. У  setTimeout неможливо передати this аргументом, як, наприклад, у методи Array (forEach, reduce, тощо), або через використання  call, як показано у прикладі нижче:

- -
setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
-
- -

Можливі рішення

- -

Типовий спосіб вирішення цієї проблеми - використання функції обгортки, яка встановлює this із необхідним значенням: 

- -
setTimeout(function(){myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout(function(){myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds
- -

Стрілочна функція також є прийнятною альтернативою:

- -
setTimeout(() => {myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout(() => {myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds
- -

Ще одне можливе рішення проблеми this - замінити нативні глобальні функції setTimeout() та setInterval() кастомними функціями, які можуть приймати об'єкт this і застосовувати його у колбек функції, використовуючи  Function.prototype.call. Наприклад: 

- -
// Enable setting 'this' in JavaScript timers
-
-var __nativeST__ = window.setTimeout,
-    __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this,
-      aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this,
-      aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
- -
Зверніть увагу:  Подібний підхід дозволяє передавати будь-яку кількість аргументів у колбек функцію таймерів навіть для IE. Таким чином, цей спосіб може також бути використаний як поліфіл. Перегляньте параграф Callback arguments .
- -

Випробування нового підхода:

- -
myArray = ["zero", "one", "two"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length > 0 ? this[sProperty] : this);
-};
-
-setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
-setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
-
- -
Зверніть увагу:  JavaScript 1.8.5 впровадив метод   Function.prototype.bind(), який встановлює значення this для кожного виклику вказаної функції. Це допомагає уникнути використання функції обгортки для призначення this колбека.
- -

Приклад використання bind():

- -
myArray = ["zero", "one", "two"];
-myBoundMethod = (function (sProperty) {
-    console.log(arguments.length > 0 ? this[sProperty] : this);
-}).bind(myArray);
-
-myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function
-myBoundMethod(1); // prints "one"
-setTimeout(myBoundMethod, 1000); // still prints "zero,one,two" after 1 second because of the binding
-setTimeout(myBoundMethod, 1500, "1"); // prints "one" after 1.5 seconds
-
- -

Примітки

- -

Таймер можна скасувати за допомогою {{domxref("Window.clearTimeout()")}}. Щоб викликати функцію повторно (наприклад, через кожні N мілісекунди), використовуйте  {{domxref("Window.setInterval()")}}.

- -

Важливо пам'ятати, що функція або фрагмент коду не можуть бути виконані, допоки не буде завершено поток функції, яка викликала setTimeout(). Наприклад. 

- -
function foo(){
-  console.log('foo has been called');
-}
-setTimeout(foo, 0);
-console.log('After setTimeout');
- -

Виведе в консоль:

- -
After setTimeout
-foo has been called
- -

Тому що, навіть не зважаючи на те, що setTimeout було викликано із нульовою затримкою, вона переміщується у чергу і її виконання відбудеться у найближчому наступному циклі, тобто не відразу. Код, що в данний момент виконується, повинен бути завершений. Тільки після цього функції, переміщені в чергу, будуть виконані. Тому порядок виконання може бути іншим, аніж очікувалось.

- -

Passing string literals

- -

Passing a string instead of a function to setTimeout() suffers from the same hazards as using eval.

- -
// Recommended
-window.setTimeout(function() {
-    alert("Hello World!");
-}, 500);
-
-// Not recommended
-window.setTimeout("alert('Hello World!');", 500);
-
- -

A string passed to setTimeout is evaluated in the global context, so local symbols in the context where setTimeout() was called will not be available when the string is evaluated as code.

- -

Причини чому затримка є фактично довшою ніж вказано

- -

There are a number of reasons why a timeout may take longer to fire than anticipated. This section describes the most common reasons.

- -

Nested timeouts forced to >=4ms

- -

Historically browsers implement setTimeout() "clamping": successive setTimeout() calls with delay smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, DOM_MIN_TIMEOUT_VALUE, is 4 ms (stored in a preference in Firefox: dom.min_timeout_value), with a DOM_CLAMP_TIMEOUT_NESTING_LEVEL of 5.

- -

In fact, 4 ms is specified by the HTML5 spec and is consistent across browsers released in 2010 and onward. Prior to {{geckoRelease("5.0")}}, the minimum timeout value for nested timeouts was 10 ms.

- -

To implement a 0 ms timeout in a modern browser, you can use {{domxref("window.postMessage()")}} as described here.

- -

Timeouts in inactive tabs clamped to >=1000ms

- -

To reduce the load (and associated battery usage) from background tabs, timeouts are often clamped to firing no more often than once per second (1000 ms) in inactive tabs.

- -

Firefox implements this behavior since version 5 (see {{bug(633421)}}, the 1000ms constant can be tweaked through the dom.min_background_timeout_value preference). Chrome implements this behavior since version 11 (crbug.com/66078).

- -

Firefox for Android uses a timeout value of 15 minutes for background tabs since {{bug(736602)}} in Firefox 14, and background tabs can also be unloaded entirely.

- -
-

Firefox 50 no longer throttles background tabs if a Web Audio API {{domxref("AudioContext")}} is actively playing sound. Firefox 51 further amends this such that background tabs are no longer throttled if an {{domxref("AudioContext")}} is present in the tab at all, even if no sound is being played. These resolve a number of issues with apps which play note-based music not being able to time or synchronize the music properly when the tab is in the background.

-
- -

Late timeouts

- -

In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks

- -

Maximum delay value

- -

Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed integer internally. This causes an integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}{{Spec2("HTML WHATWG")}}Initial definition (DOM Level 0)
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}4.04.01.0
Supports parameters for callback[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.01.0{{CompatGeckoMobile("1")}}6.06.01.0
Supports parameters for callback[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Whether it supports the optional parameters when in its first form or not.

- -

See also

- - diff --git "a/files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/index.html" "b/files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/index.html" deleted file mode 100644 index e1aab3dfde..0000000000 --- "a/files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/index.html" +++ /dev/null @@ -1,188 +0,0 @@ ---- -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/\320\277\320\276\320\264\321\226\321\217/target/index.html" "b/files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/target/index.html" deleted file mode 100644 index 20c17f2d31..0000000000 --- "a/files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/target/index.html" +++ /dev/null @@ -1,134 +0,0 @@ ---- -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