AudioContext.createMediaElementSource() - Интерфейсы веб API

AudioContext.createMediaElementSource()
=======================================

Метод `createMediaElementSource()` интерфейса `AudioContext` используется для создания объекта `MediaElementAudioSourceNode` из существующих HTML-элементов `<audio>` или `<video>` для дальнейших манипуляций со звуком и его воспроизведения.

Узнать больше о созданном таким образом аудио узле можно на справочной странице `MediaElementAudioSourceNode`.

Синтаксис
---------

```js
var audioCtx = new AudioContext();
var source = audioCtx.createMediaElementSource(myMediaElement);
```

### Параметры

`myMediaElement`

Объект `HTMLMediaElement`, который вы хотите использовать в качестве исходного звука.

### Возвращаемые значения

Объект `MediaElementAudioSourceNode`.

Пример
------

Простой пример создания аудио узла из элемента `<audio>` используя `createMediaElementSource()`, и управления усилением звука через `GainNode` (en-US) перед подачей в `AudioDestinationNode` (en-US) для воспроизведения. При движении мыши вызывается функция `updatePage()`, вычисляющая текущее усиление как отношение Y позиции курсора к общей высоте окна. Таким образом вы можете увеличивать/уменьшать громкость звучания аудио движениями мыши вверх/вниз.

**Примечание:** вы можете также посмотреть демонстрацию или исходники.

```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var myAudio = document.querySelector("audio");
var pre = document.querySelector("pre");
var myScript = document.querySelector("script");

pre.innerHTML = myScript.innerHTML;

// Создаём MediaElementAudioSourceNode
// На основе HTMLMediaElement
var source = audioCtx.createMediaElementSource(myAudio);

// Создаём узел контроля громкости (усиления)
var gainNode = audioCtx.createGain();

// Переменные, содержащие Y координату курсора мыши
// и высоту окна
var CurY;
var HEIGHT = window.innerHeight;

// Обновляем Y координату курсора при движении мышью
// и вычисляем новый коэффициент усиления

document.onmousemove = updatePage;

function updatePage(e) {
  CurY = window.Event
    ? e.pageY
    : event.clientY +
      (document.documentElement.scrollTop
        ? document.documentElement.scrollTop
        : document.body.scrollTop);

  gainNode.gain.value = CurY / HEIGHT;
}

// Последний шаг - построение графа
// Подсоединяем AudioBufferSourceNode к gainNode
// а gainNode, в свою очередь, к конечному узлу вывода
// Теперь мы можем слушать музыку управляя громкостью воспроизведения движением курсора мыши :)
source.connect(gainNode);
gainNode.connect(audioCtx.destination);
```

**Примечание:** Вызов `createMediaElementSource()` перенаправит выходной поток аудиоданных из `HTMLMediaElement` в обрабатывающий граф AudioContext. Управление воспроизведением медиа все ещё будет осуществляться через API медиа элемента или его панель управления.

Спецификации
------------

| Specification |
| --- |
| Web Audio API # dom-audiocontext-createmediaelementsource |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Using the Web Audio API (en-US)


HTMLImageElement.srcset - Интерфейсы веб API

HTMLImageElement.srcset
=======================

`HTMLImageElement` свойство **`srcset`** это строка, которая определяет один или несколько **строк с источниками изображений**, разделённые запятыми (`,`) и условия для их использования. Каждая строка предлагаемого изображения содержит **URL** картинки и опциональные **ширину** или **пиксельную плотность** которые указывают при каких условия это изображение должно быть использовано вместо основной картинки обозначенной свойством `src` (en-US).

Свойство `srcset`, вместе с `sizes` (en-US), критически важный атрибут при разработке адаптивных веб-сайтов, ведь они могут использоваться вместе для создания адаптивных страниц, использующих подходящие изображения при определённых условиях.

Синтаксис
---------
```

htmlImageElement.srcset = imageCandidateStrings;
let srcset = htmlImageElement.srcset;
```

### Значение

A `USVString` (en-US) containing a comma-separated list of one or more image candidate strings to be used when determining which image resource to present inside the `<img>` element represented by the `HTMLImageElement`*.*

Each image candidate string must begin with a valid URL referencing a non-interactive graphic resource. This is followed by a comma (`,`) character and then a condition descriptor that indicates the circumstances in which the indicated image should be used. Space characters, other than the whitespace separating the URL and the corresponding condition descriptor, are ignored; this includes both leading and trailing space, as well as space before or after each comma.

If the condition descriptor is not provided (in other words, the image candidate provides only a URL), the candidate is used as the fallback if none of the other candidates match. Otherwise, the condition descriptor may take one of two forms:

* To indicate that the image resource specified by the image candidate string should be used when the image is being rendered with a particular width in pixels, provide a **width descriptor** comprised the number giving that width in pixels followed by the lower case letter "w". For example, to provide an image resource to be used when the renderer needs a 450 pixel wide image, use the width descriptor string `450w`. The specified width must be a positive, non-zero, integer, and *must* match the intrinsic width of the referenced image.
* Alternatively, you can use a **pixel density descriptor**, which specifies the condition in which th corresponding image resource should be used as the display's pixel density. This is written by stating the pixel density as a positive, non-zero floating-point value followed by the lower-case letter "x". As an example, to state that the corresponding image should be used when the pixel density is double the standard density, you can give the pixel density descriptor `2x` or `2.0x`.

You may mix and match the two types of descriptor. You must not, however, provide multiple image candidate strings that specify the same descriptor. All of the following are valid image candidate strings:
```

"images/team-photo.jpg 1x, images/team-photo-retina.jpg 2x, images/team-photo-full 2048w"
```

This string provides versions of an image to be used at the standard pixel density (`1x`) as well as double that pixel density (`2x`). Also available is a version of the image for use at a width of 2048 pixels (`2048w`).
```

"header640.png 640w, header960.png 960w, header1024.png 1024w, header.png"
```

This string provides versions of a header image to use when the user agent's renderer needs an image of width 640px, 960px, or 1024px. An additional, fallback image candidate is provided without any condition at all, to be used for any other width.
```

"icon32px.png 32w, icon64px.png 64w, icon-retina.png 2x icon-ultra.png 3x icon.svg"
```

Here, options are provided for an icon at widths of 32px and 64px, as well as at pixel densities of 2x and 3x. A fallback image is provided as an SVG file that should be used in all other cases. Notice that the candidates may use different image types.

For more information on what image formats are available for use in the `<img>` element, see Image file type and format guide (en-US).

Пример
------

### HTML

The HTML below indicates that the default image is the 200 pixel wide version of the clock image we use in several places throughout our documentation. Also specified by the `srcset` attribute is that the 200-pixel version should be used for 1x displays while the 400-pixel version should be used for 2x displays.

```html
<div class="box">
  <img
 src="/files/16797/clock-demo-200px.png"
 alt="Clock"
 srcset="
 /files/16864/clock-demo-200px.png 1x,
 /files/16797/clock-demo-400px.png 2x
 " />
</div>
```

### CSS

The CSS simply specifies that the image and its surrounding box should be 200 pixels square and should have a simple border around it. Also provided is the `word-break` attribute, using the `break-all` value to tell the browser to wrap the string within the width available regardless of where in the string the wrap must occur.

```css
.box {
  width: 200px;
  border: 2px solid rgba(150, 150, 150, 255);
  padding: 0.5em;
  word-break: break-all;
}

.box img {
  width: 200px;
}
```

### JavaScript

The following code is run within a handler for the `window`'s `load` event. It uses the image's `currentSrc` (en-US) property to fetch and display the URL selected by the browser from the `srcset`.

```js
let box = document.querySelector(".box");
let image = box.querySelector("img");

let newElem = document.createElement("p");
newElem.innerHTML = `Image: <code>${image.currentSrc}</code>`;
box.appendChild(newElem);
```

### Результат

In the displayed output below, the selected URL will correspond with whether your display results in selecting the 1x or the 2x version of the image. If you happen to have both standard and high density displays, try moving this window between them and reloading the page to see the results change.

For additional examples, see our guide to responsive images.

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-img-srcset |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Images in HTML
* Responsive images
* Image file type and format guide (en-US)


HTMLImageElement.decoding - Интерфейсы веб API

HTMLImageElement.decoding
=========================

Свойство **`decoding`** интерфейса `HTMLImageElement` предназначено для указания браузеру, как он должен декодировать изображение.

Синтаксис
---------
```

refStr = imgElem.decoding;
imgElem.decoding = refStr;
```

### Значения

`DOMString` предоставляет указания по декодированию. Возможные значения:

* **`sync`**: Декодировать изображение синхронно для отображения одновременно с другим содержимым.
* **`async`**: Декодировать содержимое асинхронно для уменьшения задержки в отображении другого содержимого.
* **`auto`**: Режим по умолчанию, который не отдаёт предпочтения ни одному режиму декодирования, предоставляя браузеру решать, какой режим для пользователя оптимальное.
Примеры
-------

```js
var img = new Image();
img.decoding = "sync";
img.src = "img/logo.png";
```

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-img-decoding |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* <img>: The Image Embed element


Image() - Интерфейсы веб API

Image()
=======

Конструктор **Image()** создаёт новый экземпляр HTMLImageElement. Эквивалентно document.createElement ('img').### Конструктор элемента Image

Имеет два необязательных параметра: **ширину** и **высоту**:

```js
Image([unsigned long width, unsigned long height])
```

### Пример

##### Исходный код

```js
var img = new Image(100, 200);
img.src = "picture.jpg";
console.log(img);
```

##### Результат

```html
<img width="100" height="200" src="picture.jpg" />
```

**Примечание:** Примечание: этот конструктор существует только для истории, и возвращает экземпляр HTMLImageElement точно также, как и `document.createElement('img')`.


Location.replace() - Интерфейсы веб API

Location.replace()
==================

Метод **`Location.replace()`** заменяет текущий ресурс на новый по URL, указанному в качестве параметра. Отличие от `assign()` в том, что при использовании `replace()` текущая страница не будет сохранена в `History`, и пользователь не сможет использовать кнопку *назад*, чтобы вернуться к ней.

Если условия вызова метода не удовлетворяют требованиям безопасности, выбрасывается `DOMException` (en-US) с типом `SECURITY_ERROR`. Это случается, если домен скрипта, вызывающего метод, не совпадает с доменом страницы, изначально содержащимся в `Location`.

Если новый URL некорректен, выбрасывается `DOMException` (en-US) с типом `SYNTAX_ERROR`.

Синтаксис
---------
```

object.replace(url);
```

### Параметры

*url*

`DOMString` , содержащий URL страницы, на которую нужно перейти.

Примеры
-------

```js
// Перейти на статью Location.reload, заменив текущую страницу
document.location.replace(
  "https://developer.mozilla.org/ru/docs/Web/API/Location.reload",
);
```

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-location-replace-dev |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Интерфейс `Location`, к которому принадлежит этот метод.
* Похожие методы: `Location.assign()` и `Location.reload()`.


Location.assign() - Интерфейсы веб API

Location.assign()
=================

Метод **`Location.assign()`** запускает загрузку и отображение нового документа по указанному URL.

Если новый URL не удовлетворяет требованиям безопасности, выбрасывается `DOMException` (en-US) с типом `SECURITY_ERROR`. Это случается, если домен скрипта, вызывающего метод, не совпадает с доменом страницы, изначально содержащимся в `Location`.

Если новый URL некорректен, выбрасывается `DOMException` (en-US) с типом `SYNTAX_ERROR`.

Синтаксис
---------
```

object.assign(url);
```

### Параметры

*url*

`DOMString`, содержащий URL страницы, на которую нужно перейти.

Примеры
-------

```js
// Перейти на статью Location.reload
document.location.assign(
  "https://developer.mozilla.org/ru/docs/Web/API/Location.reload",
);
```

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-location-assign-dev |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Интерфейс `Location`, к которому принадлежит этот метод.
* Похожие методы: `Location.replace()` и `Location.reload()`.


Location.reload() - Интерфейсы веб API

Location.reload()
=================

Метод **`Location.reload()`** перезагружает ресурс из текущего URL подобно кнопке обновления браузера.

Если условия вызова метода не удовлетворяют требованиям безопасности, выбрасывается `DOMException` (en-US) с типом `SECURITY_ERROR`. Это случается, если домен скрипта, вызывающего метод, не совпадает с доменом страницы, изначально содержащимся в `Location`.

Синтаксис
---------
```

location.reload();
```

Примеры
-------

```js
// Перезагрузить текущую страницу
document.location.reload();
```

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-location-reload-dev |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Интерфейс `Location`, к которому принадлежит этот метод.
* Похожие методы: `Location.assign()` и `Location.replace()`.


EventTarget.dispatchEvent() - Интерфейсы веб API

EventTarget.dispatchEvent()
===========================

Отправляет событие в общую систему событий. Это событие подчиняется тем же правилам поведения "Захвата" и "Всплывания" как и непосредственно инициированные события.

Синтаксис
---------
```

cancelled = !target.dispatchEvent(event)
```

### Параметры

* `event` - объект `Event`, который инициализируется.
* `target` - используется для инициализации `Event.target` и определяет, какие обработчики события вызвать.
### Возвращаемое Значение

* Возвращаемое значение — `false`, если событие отменяемое и хотя бы один из обработчиков этого события вызвал `Event.preventDefault()`. В ином случае — `true`.

Метод `dispatchEvent` генерирует исключение `UNSPECIFIED_EVENT_TYPE_ERR`, если тип события не был указан при инициализации до вызова метода, или если тип события равен `null` или пустой строке. Исключения возникающие в обработчиках события работают как неперехваченные исключения; обработчики события отрабатывают во вложенном стеке вызовов: они блокируют вызывающий код до окончания своего выполнения, но исключения не распространяются на вызывающего.

Примечания
----------

dispatchEvent является последним шагом для процесса создание => инициализация => диспетчер, который используется для контроля событий внутри модели выполнения событий.Событие может быть создано используя метод document.createEvent (en-US) и инициализировано используя initEvent (en-US) или другой, более конкретный, метод инициализации, такой как initMouseEvent (en-US) или initUIEvent (en-US).

Смотрите также События

Пример
------

Для прочтения примера смотрите Создание и инициирование собственных событий .

Спецификация
------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-eventtarget-dispatchevent③ |

Примечание
----------

`dispatchEvent` представляет собой последний шаг в процессе create-init-dispatch, который служит для отправки событий.

Событие может быть создано методом document.createEvent и инициализировано initEvent или, более конкретными инициализирующими методами, такими как initMouseEvent или initUIEvent.

Смотрите также справку по Event object.

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


EventTarget() - Интерфейсы веб API

EventTarget()
=============

**`EventTarget()`** конструктор создаёт новый `EventTarget` экземпляр объекта.

Синтаксис
---------
```

var myEventTarget = new EventTarget();
```

### Параметры

Нет параметров.

### Возвращаемые значения

Экземпляр `EventTarget` объекта.

Примеры
-------

```js
class MyEventTarget extends EventTarget {
  constructor(mySecret) {
    super();
    this._secret = mySecret;
  }

  get secret() {
    return this._secret;
  }
}

let myEventTarget = new MyEventTarget(5);
let value = myEventTarget.secret; // == 5
myEventTarget.addEventListener("foo", function (e) {
  this._secret = e.detail;
});

let event = new CustomEvent("foo", { detail: 7 });
myEventTarget.dispatchEvent(event);
let newValue = myEventTarget.secret; // == 7
```

Спецификации
------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-eventtarget-eventtarget① |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `EventTarget`


Метод EventTarget.removeEventListener() - Интерфейсы веб API

Метод EventTarget.removeEventListener()
=======================================

Удаляет обработчик события, который был зарегистрирован при помощи `EventTarget.addEventListener()`. Обработчик определяется типом события, самой функцией обработки события, и дополнительными параметрами, переданными при регистрации обработчика.

Синтаксис
---------
```

target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);
```

### Параметры

`type`

Строка, описывающая тип события, которое нужно удалить.

`listener`

`EventListener` (en-US) функция, которую нужно удалить с элемента.

options Необязательный

Объект опций, описывающий характеристики обработчика события. Доступные опции:

* `capture`: `Boolean`. Указывает на то, что события этого типа отправляются данному обработчику до того, как происходит их передача любым `EventTarget`, находящимся ниже него в дереве DOM.
* `passive`: `Boolean`. Указывает на то, что `listener` никогда не будет вызывать `preventDefault()`. В противном случае (если `listener` вызовет `preventDefault()` ), user agent проигнорирует вызов и сгенерирует предупреждение в консоли.

`useCapture` Необязательный

Указывает, был ли удаляемый `EventListener` (en-US) зарегистрирован как перехватывающий обработчик, или нет. Если этот параметр отсутствует, предполагается значение по умолчанию: `false`.

Если обработчик был зарегистрирован дважды, один раз с перехватом (с `capture`) и один - без, каждый из них должен быть удалён по отдельности. Удаление перехватывающего обработчика никак не затрагивает неперехватывающую версию этого же обработчика, и наоборот.

**Примечание:** `useCapture` требуется в большинстве основных браузеров старых версий. Если вы хотите поддерживать большую совместимость, вы всегда должны использовать параметр `useCapture`.

### Возвращаемое значение

`undefined`.

### Поиск обработчика при удалении

В большинстве браузеров помимо типа события и функции важно лишь совпадение значений параметра `useCapture` / `options.capture`, но так как это поведение не закреплено стандартом, наилучшим способом будет указание для `removeEventListener()` в точности тех же параметров, что были переданы в `addEventListener()`.

Примечания
----------

Если `EventListener` (en-US) был удалён из `EventTarget` в процессе обработки события (например предшествующим `EventListener` (en-US) того же типа), он не будет вызван. После удаления, `EventListener` (en-US) не будет вызываться, однако его можно назначить заново.

Вызов `removeEventListener()` с параметрами, не соответствующими ни одному зарегистрированному `EventListener` (en-US) в `EventTarget`, не имеет никакого эффекта.

Пример
------

Это пример добавления и последующего удаления обработчика событий.

```js
var div = document.getElementById("div");
var listener = function (event) {
  /\* do something here \*/
};
div.addEventListener("click", listener, false);
div.removeEventListener("click", listener, false);
```

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### Gecko примечания

* В версиях Firefox младше версии 6 браузер бросает исключение, если параметр `useCapture` не был явно указан как false. В Gecko младше 9.0, `addEventListener()` бросает исключение, если параметр `listener` равен `null`; в настоящее время метод отрабатывает без ошибки, но при этом не производит никаких действий.
### Opera примечания

* В Opera 12.00 параметр `useCapture` - опциональный (source).
### WebKit примечания

* Несмотря на то, что WebKit явно добавил "`[optional]`" к параметру `useCapture` в Safari 5.1 и Chrome 13, это работало и до изменений.
### Спецификация

* removeEventListener
Полифилы для поддержки старых браузеров
---------------------------------------

`addEventListener()` и `removeEventListener()` отсутствуют в старых браузерах. Это ограничение можно обойти, вставив следующий код в начале ваших скриптов, что позволяет использовать `addEventListener()` и `removeEventListener()` в версиях, не поддерживающих эти методы нативно. Тем не менее, этот метод не работает в Internet Explorer версии 7 и ниже, так как расширение Element.prototype не поддерживалось в более ранних версиях Internet Explorer ранее 8.

```js
if (!Element.prototype.addEventListener) {
  var oListeners = {};
  function runListeners(oEvent) {
    if (!oEvent) {
      oEvent = window.event;
    }
    for (
      var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type];
      iElId < oEvtListeners.aEls.length;
      iElId++
    ) {
      if (oEvtListeners.aEls[iElId] === this) {
        for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) {
          oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent);
        }
        break;
      }
    }
  }
  Element.prototype.addEventListener = function (
    sEventType,
    fListener /\*, useCapture (will be ignored!) \*/,
  ) {
    if (oListeners.hasOwnProperty(sEventType)) {
      var oEvtListeners = oListeners[sEventType];
      for (
        var nElIdx = -1, iElId = 0;
        iElId < oEvtListeners.aEls.length;
        iElId++
      ) {
        if (oEvtListeners.aEls[iElId] === this) {
          nElIdx = iElId;
          break;
        }
      }
      if (nElIdx === -1) {
        oEvtListeners.aEls.push(this);
        oEvtListeners.aEvts.push([fListener]);
        this["on" + sEventType] = runListeners;
      } else {
        var aElListeners = oEvtListeners.aEvts[nElIdx];
        if (this["on" + sEventType] !== runListeners) {
          aElListeners.splice(0);
          this["on" + sEventType] = runListeners;
        }
        for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) {
          if (aElListeners[iLstId] === fListener) {
            return;
          }
        }
        aElListeners.push(fListener);
      }
    } else {
      oListeners[sEventType] = { aEls: [this], aEvts: [[fListener]] };
      this["on" + sEventType] = runListeners;
    }
  };
  Element.prototype.removeEventListener = function (
    sEventType,
    fListener /\*, useCapture (will be ignored!) \*/,
  ) {
    if (!oListeners.hasOwnProperty(sEventType)) {
      return;
    }
    var oEvtListeners = oListeners[sEventType];
    for (
      var nElIdx = -1, iElId = 0;
      iElId < oEvtListeners.aEls.length;
      iElId++
    ) {
      if (oEvtListeners.aEls[iElId] === this) {
        nElIdx = iElId;
        break;
      }
    }
    if (nElIdx === -1) {
      return;
    }
    for (
      var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx];
      iLstId < aElListeners.length;
      iLstId++
    ) {
      if (aElListeners[iLstId] === fListener) {
        aElListeners.splice(iLstId, 1);
      }
    }
  };
}
```

Смотрите также
--------------

* `EventTarget.addEventListener()`.
* Non-standard
`EventTarget.detachEvent()` (en-US).


Метод EventTarget.addEventListener() - Интерфейсы веб API

Метод EventTarget.addEventListener()
====================================

Метод `EventTarget.addEventListener()` регистрирует определённый обработчик события, вызванного на `EventTarget`.

`EventTarget` может быть `Element`, `Document`, `Window`, или любым другим объектом, поддерживающим события (таким как `XMLHttpRequest` (en-US)).

Синтаксис
---------
```

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, useCapture,
wantsUntrusted
 Non-standard
]); // только Gecko/Mozilla
```

### Параметры

`type`

Чувствительная к регистру строка, представляющая тип обрабатываемого события (en-US).

`listener`

Объект, который принимает уведомление, когда событие указанного типа произошло. Это должен быть объект, реализующий интерфейс `EventListener` (en-US) или просто функция JavaScript.

`options` Необязательный

Объект `options`, который определяет характеристики объекта, прослушивающего событие. Доступны следующие варианты:

* `capture`: `Boolean` указывает, что события этого типа будут отправлены зарегистрированному обработчику `listener` перед отправкой на `EventTarget`, расположенный ниже в дереве DOM.
* `once`: `Boolean` указывает, что обработчик должен быть вызван не более одного раза после добавления. Если `true`, обработчик автоматически удаляется при вызове.
* `passive`: `Boolean` указывает, что обработчик никогда не вызовет `preventDefault()`. Если всё же вызов будет произведён, браузер должен игнорировать его и генерировать консольное предупреждение. Пример Улучшение производительности прокрутки с помощью passive true
* Non-standard
 `mozSystemGroup`: `Boolean` указывает, что обработчик должен быть добавлен в системную группу. Доступно только в коде, запущенном в XBL или в расширении Chrome.

`useCapture` Необязательный

Если равно `true`, `useCapture` указывает, что пользователь желает начать захват. После инициализации захвата все события указанного типа будут отправлены в зарегистрированный `listener` перед отправкой в какой-либо `EventTarget` под ним в дереве DOM. События, восходящие вверх по дереву, не будут вызывать обработчиков, которым назначено использовать захват. Смотрите DOM Level 3 Events для более детального объяснения. Значение `useCapture` по умолчанию равно `false`.

**Примечание:** Для обработчиков событий прикреплённых к цели события, событие находиться в целевой фазе, а не в фазах захвата или всплытия. События в целевой фазе инициируют все обработчики на элементе в том порядке, в котором они были зарегистрированы независимо от параметра `useCapture`.

**Примечание:** `useCapture` не всегда был опциональным. Лучше указывать данный параметр для повышения совместимости.

`wantsUntrusted`
Non-standard

Если равно `true`, обработчик будет получать сгенерированные события, посланные со страницы (по умолчанию равно `false` для chrome и `true` для обычных веб-страниц). Этот параметр доступен только в Gecko и в основном полезен для использования в дополнениях и самом браузере. Смотрите Взаимодействие между привилегированными и непривилегированными страницами для примеров использования.

Прежде чем использовать определённое значение в объекте `options`, рекомендуется убедиться, что браузер пользователя поддерживает его, поскольку это дополнение, которое не все браузеры поддерживали исторически.

### Возвращаемое значение

`undefined`

Примечания по использованию
---------------------------

### Колбэк обработчика событий

Обработчик событий может быть задан либо как колбэк-функция, либо как объект реализующий `EventListener` (en-US), чей `handleEvent()` (en-US) метод служит как колбэк-функция.

Сама колбэк-функция имеет те же параметры и возвращаемое значение что и метод `handleEvent()`; То есть колбэк принимает единственный параметр: объект основанный на `Event` описывая событие, которое произошло и ничего не возвращая.

Например, колбэк обработчика событий, который может использоваться для обработки `fullscreenchange (en-US)` и `fullscreenerror (en-US)` может выглядеть так:

```js
function eventHandler(event) {
  if (event.type == "fullscreenchange") {
    /\* Переключатель полноэкранного режима \*/
  } /\* fullscreenerror \*/ else {
    /\* Ошибка переключателя полноэкранного режима \*/
  }
}
```

### Безопасная проверка поддержки `option`

В более старых версиях спецификации DOM третьим параметром `addEventListener` было логическое значение, указывающее, следует ли захватывать событие на этапе погружения. Со временем стало ясно, что необходимо больше вариантов. Вместо добавления дополнительных параметров в функцию (усложняя ситуацию при использовании необязательных значений) третий параметр был изменён на объект, который может содержать различные свойства, определяющие значения параметров для настройки обработчика событий.

Поскольку старые браузеры (а также некоторые не слишком старые браузеры) по-прежнему предполагают, что третий параметр является логическим, возникает необходимость создания своего кода, чтобы разумно обрабатывать этот сценарий. Вы можете сделать это, используя функцию обнаружения для каждого из интересующих вас параметров.

Например, если вы хотите проверить параметр `passive`:

```js
var passiveSupported = false;

try {
  var options = Object.defineProperty({}, "passive", {
    get: function () {
      passiveSupported = true;
    },
  });

  window.addEventListener("test", null, options);
} catch (err) {}
```

Этот код создаёт объект `options` с геттером для свойства passive, устанавливающим флаг `passiveSupported` в `true`, если он вызван. Это означает, что если браузер проверяет значение свойства `passive` на объекте `options`, значение `passiveSupported` будет установлено в true; в противном случае он останется ложным. Затем мы вызываем `addEventListener`, чтобы настроить фальшивый обработчик событий, указав эти параметры для проверки опций, если браузер распознает объект в качестве третьего параметра.

Для проверки поддержки использования какой-либо опции можно просто добавить геттер для неё, используя код, подобный тому, что показан выше.

Если вы хотите добавить обработчик событий, использующий параметры, о которых идёт речь, вы можете сделать это подобным образом:

```js
someElement.addEventListener(
  "mouseup",
  handleMouseUp,
  passiveSupported ? { passive: true } : false,
);
```

Здесь мы добавляем обработчик события `mouseup (en-US)` элемента `someElement`. Для третьего параметра, если `passiveSupported` имеет значение `true`, мы указываем объект `options` с `passive: true`; в противном случае мы знаем, что нам нужно передать логическое значение, и мы передаём `false` как значение параметра `useCapture`.

Вы можете использовать стороннюю библиотеку, такую как Modernizr или Detect It, чтобы проверить поддержку необходимого свойства.

Узнайте больше о EventListenerOptions из Web Incubator Community Group.

Примеры
-------

### Добавление простого обработчика

Эти примеры демонстрируют как использовать `addEventListener()` для наблюдения за щелчками мышкой по элементу.

#### HTML Содержимое

```html
<table id="outside">
  <tr>
    <td id="t1">один</td>
  </tr>
  <tr>
    <td id="t2">два</td>
  </tr>
</table>
```

#### JavaScript Содержимое

```js
// Функция изменяет содержимое t2
function modifyText() {
  var t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "три") {
    t2.firstChild.nodeValue = "два";
  } else {
    t2.firstChild.nodeValue = "три";
  }
}

// Добавляет обработчика событий для таблицы
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);
```

В примере выше, `modifyText()` регистрирует обработчика для события click, используя `addEventListener()`. Клик в любом месте таблицы будет поднимать обработчик и запускать `modifyText()`.

#### Результат

Если вам нужно передать параметры в обработчик, вы можете использовать анонимные функции.

### Обработчик события с анонимной функцией

#### HTML Содержимое

```html
<table id="outside">
  <tr>
    <td id="t1">один</td>
  </tr>
  <tr>
    <td id="t2">два</td>
  </tr>
</table>
```

#### JavaScript Содержимое

```js
// Функция, изменяющая содержание t2
function modifyText(new\_text) {
  var t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = new_text;
}

// Функция, добавляющая обработчик к таблице
el = document.getElementById("outside");
el.addEventListener(
  "click",
  function () {
    modifyText("четыре");
  },
  false,
);
```

Обратите внимание, что addEvenListener - это анонимная функция, которая инкапсулирует код, который, в свою очередь, может отправлять параметры функции modifyText(), которая отвечает за фактический ответ на событие.

#### Результат

### Обработчик события со стрелочной функцией

#### HTML

```html
<table id="outside">
  <tr>
    <td id="t1">one</td>
  </tr>
  <tr>
    <td id="t2">two</td>
  </tr>
</table>
```

#### JavaScript

```js
// Function to change the content of t2
function modifyText(new\_text) {
  var t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = new_text;
}

// Add event listener to table with an arrow function
var el = document.getElementById("outside");
el.addEventListener(
  "click",
  () => {
    modifyText("four");
  },
  false,
);
```

#### Результат

Обратите внимание: несмотря на то, что анонимные и стрелочные функции схожи, они имеют разные значения `this`.

Примечания
----------

### Зачем использовать `addEventListener`?

`addEventListener` — это способ зарегистрировать обработчик события, описанный в документации W3C DOM. Вот список преимуществ его использования:

* Позволяет добавлять множество обработчиков для одного события. Это особенно полезно для DHTML библиотек или Mozilla extensions, которые должны работать в условиях использования сторонних библиотек/расширений.
* Предоставляет точный контроль фазы срабатывания(вызова) обработчика (захват или всплытие).
* Срабатывает на любом DOM-элементе, а не только на HTML-элементах.

Ниже описан другой, более старый способ регистрации обработчиков.

### Добавление обработчика во время обработки события

Если `EventListener` добавлен к `EventTarget` во время обработки события, он не будет вызван текущими действиями, но может быть вызван на более поздней стадии обработки события, при восходящей обработке.

### Несколько одинаковых обработчиков события

Если зарегистрировано несколько одинаковых `EventListener` на одном `EventTarget` с одинаковыми параметрами, дублирующиеся обработчики игнорируются. Так как одинаковые обработчики игнорируются, не требуется удалять их вручную с помощью метода removeEventListener (en-US).

### Значение `this` в обработчике

Обычно желательно передавать элемент, на котором сработал обработчик события, например, при использовании обобщённых обработчиков для схожих элементов. При добавлении функции при помощи `addEventListener()` значение переменной `this` меняется — заметьте, что значение `this` передаётся в функцию от вызывающего объекта.

В примере выше значение переменной `this` внутри `modifyText()` при вызове событием клика равно таблице 't'. Это противоположно поведению, которое возникает, если обработчик добавлен в HTML-разметке:

```html
<table id="t" onclick="modifyText();">
  . . .
</table>
```

Значение переменной `this` внутри `modifyText()` при вызове событием клика будет равно ссылке на глобальный (window) объект (или `undefined` при использовании strict mode)

**Примечание:** В JavaScript 1.8.5 введён метод `Function.prototype.bind()` (en-US), который позволяет указать значение, которое должно быть использовано для всех вызовов данной функции. Он позволяет вам легко обходить ситуации, в которых не ясно, чему будет равно this, в зависимости от того, в каком контексте будет вызвана ваша функция. заметьте, также, что вам будет необходимо иметь внешнюю ссылку на обработчик, чтобы вы могли удалить его позже.

Пример с использованием `bind` и без него:

```js
var Something = function (element) {
  this.name = "Something Good";
  this.onclick1 = function (event) {
    console.log(this.name); // undefined, так как this является элементом
  };
  this.onclick2 = function (event) {
    console.log(this.name); // 'Something Good', так как в this передано значение объекта Something
  };
  element.addEventListener("click", this.onclick1, false);
  element.addEventListener("click", this.onclick2.bind(this), false); // Trick
};
```

Проблема в примере выше заключается в том, что вы не можете удалить обработчик, вызванный с `bind`. Другое решение использует специальную функцию `handleEvent`, чтобы перехватывать любые события:

```js
var Something = function (element) {
  this.name = "Something Good";
  this.handleEvent = function (event) {
    console.log(this.name); // 'Something Good', так как this является объектом Something
    switch (event.type) {
      case "click":
        // код обработчика...
        break;
      case "dblclick":
        // код обработчика...
        break;
    }
  };

  // В этом случае обработчики хранятся в this, а не в this.handleEvent
  element.addEventListener("click", this, false);
  element.addEventListener("dblclick", this, false);

  // Вы можете напрямую удалять обработчики
  element.removeEventListener("click", this, false);
  element.removeEventListener("dblclick", this, false);
};
```

### Наследство Internet Explorer и attachEvent

В Internet Explorer младше 9 версии, вы можете использовать `attachEvent` вместо стандартного `addEventListener`. Для поддержки IE, пример выше может быть модифицирован следующим образом:

```js
if (el.addEventListener) {
  el.addEventListener("click", modifyText, false);
} else if (el.attachEvent) {
  el.attachEvent("onclick", modifyText);
}
```

У `attachEvent` есть недостаток: `this` будет ссылаться на объект `window`, а не на элемент, на котором он был вызван.

### Совместимость

Вы можете обойти методы `addEventListener`, `removeEventListener`, `Event.preventDefault` и `Event.stopPropagation` не поддерживаемы в IE 8 используя следующий код в начале вашего скрипта. Этот код поддерживает использование `handleEvent` и события `DOMContentLoaded`.

**Примечание:** useCapture не поддерживается, так как IE 8 не имеет альтернативного метода для этого. Также заметьте, что следующий код только добавляет поддержку IE 8. Также, он работает только при соблюдении стандартов: объявление DOCTYPE страницы обязательно.

```js
(function () {
  if (!Event.prototype.preventDefault) {
    Event.prototype.preventDefault = function () {
      this.returnValue = false;
    };
  }
  if (!Event.prototype.stopPropagation) {
    Event.prototype.stopPropagation = function () {
      this.cancelBubble = true;
    };
  }
  if (!Element.prototype.addEventListener) {
    var eventListeners = [];

    var addEventListener = function (
      type,
      listener /\*, useCapture (will be ignored) \*/,
    ) {
      var self = this;
      var wrapper = function (e) {
        e.target = e.srcElement;
        e.currentTarget = self;
        if (listener.handleEvent) {
          listener.handleEvent(e);
        } else {
          listener.call(self, e);
        }
      };
      if (type == "DOMContentLoaded") {
        var wrapper2 = function (e) {
          if (document.readyState == "complete") {
            wrapper(e);
          }
        };
        document.attachEvent("onreadystatechange", wrapper2);
        eventListeners.push({
          object: this,
          type: type,
          listener: listener,
          wrapper: wrapper2,
        });

        if (document.readyState == "complete") {
          var e = new Event();
          e.srcElement = window;
          wrapper2(e);
        }
      } else {
        this.attachEvent("on" + type, wrapper);
        eventListeners.push({
          object: this,
          type: type,
          listener: listener,
          wrapper: wrapper,
        });
      }
    };
    var removeEventListener = function (
      type,
      listener /\*, useCapture (will be ignored) \*/,
    ) {
      var counter = 0;
      while (counter < eventListeners.length) {
        var eventListener = eventListeners[counter];
        if (
          eventListener.object == this &&
          eventListener.type == type &&
          eventListener.listener == listener
        ) {
          if (type == "DOMContentLoaded") {
            this.detachEvent("onreadystatechange", eventListener.wrapper);
          } else {
            this.detachEvent("on" + type, eventListener.wrapper);
          }
          eventListeners.splice(counter, 1);
          break;
        }
        ++counter;
      }
    };
    Element.prototype.addEventListener = addEventListener;
    Element.prototype.removeEventListener = removeEventListener;
    if (HTMLDocument) {
      HTMLDocument.prototype.addEventListener = addEventListener;
      HTMLDocument.prototype.removeEventListener = removeEventListener;
    }
    if (Window) {
      Window.prototype.addEventListener = addEventListener;
      Window.prototype.removeEventListener = removeEventListener;
    }
  }
})();
```

### Старый способ регистрации обработчиков событий

`addEventListener()` был добавлен в спецификации DOM 2 Events. До этого обработчики добавлялись следующим образом:

```js
// Передача ссылки на функцию — не добавляйте '()' после него, это вызовет функцию!
el.onclick = modifyText;

// Использование функционального выражения
element.onclick = function () {
  // ... логика функции ...
};
```

Этот метод заменяет текущие обработчики события `click`, если они есть. Тоже самое для других событий и ассоциируемых с ними обработчиков, таких как `blur` (`onblur`), `keypress` (`onkeypress`), и так далее.

Так как это по существу было частью DOM 0, этот метод имеет широкую поддержку и не требует специального кросс-браузерного кода; следовательно, это обычно используется, чтобы добавлять обработчики динамически, если не требуются расширенные возможности `addEventListener()`.

### Вопросы памяти

```js
var i;
var els = document.getElementsByTagName("\*");

// Случай 1
for (i = 0; i < els.length; i++) {
  els[i].addEventListener(
    "click",
    function (e) {
      /\*некоторые действия\*/
    },
    false,
  );
}

// Случай 2
function processEvent(e) {
  /\*некоторые действия\*/
}

for (i = 0; i < els.length; i++) {
  els[i].addEventListener("click", processEvent, false);
}
```

В первом случае новая (анонимная) функция создаётся при каждом шаге цикла. Во втором случае одна заранее объявленная функция используется как обработчик события. Из этого следует меньшее потребление памяти. Более того, в первом случае, вследствие отсутствия ссылок на анонимные функции, невозможно вызвать `element.removeEventListener,` потому что нет ссылки на обработчик, в то время, как во втором случае возможно вызвать `myElement.removeEventListener("click", processEvent, false)`.

### Улучшение производительности прокрутки с помощью `passive: true`

Значение по умолчанию для параметра `passive` - `false`. Начиная с Chrome 56 (desktop, Chrome for Android, Android webview) значение по умолчанию для `touchstart (en-US)` и `touchmove (en-US)` равно `true`, а вызовы `preventDefault()` не разрешены. Чтобы отменить это поведение, необходимо установить параметр `passive` в `false` (см. пример ниже). Это изменение не позволяет обработчику блокировать показ страницы во время прокрутки пользователя. Демонстрация доступна на сайте разработчиков Google. Обратите внимание, что Edge вообще не поддерживает `options`, и добавление его без проверки поддержки помешает использовать аргумент `useCapture`.

```js
/\* Не позволяем обработчику блокировать показ страницы \*/
var passiveSupported = false;
try {
  window.addEventListener(
    "test",
    null,
    Object.defineProperty({}, "passive", {
      get: function () {
        passiveSupported = true;
      },
    }),
  );
} catch (err) {}

/\* Добавляем обработчик событий \*/
var elem = document.getElementById("elem");
elem.addEventListener(
  "touchmove",
  function listener() {
    /\* do something \*/
  },
  passiveSupported ? { passive: true } : false,
);
```

Установка `passive` не имеет значения для основного события `scroll (en-US)`, поскольку его нельзя отменить, поэтому его обработчик в любом случае не может блокировать показ страницы.

Спецификации
------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-eventtarget-addeventlistener③ |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Дополнительная информация
-------------------------

* `EventTarget.removeEventListener()`
* Creating and triggering custom events (en-US)
* More details on the use of `this` in event handlers


Navigator: метод taintEnabled() - Интерфейсы веб API

Navigator: метод taintEnabled()
===============================

**Устарело:** Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

Метод `Navigator.taintEnabled()` всегда возвращает `false`.

Метод защиты с помощью «порчи» использовался в JavaScript 1.2 и был удалён очень давно. Этот метод существует только для поддержания совместимости с очень старым кодом.

Синтаксис
---------

```js
taintEnabled()
```

### Параметры

Нет.

### Возвращаемое значение

Всегда возвращает `false`.

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-navigator-taintenabled |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Navigator`


Navigator: метод getVRDisplays() - Интерфейсы веб API

Navigator: метод getVRDisplays()
================================

**Устарело:** Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

**Не стандартно:** Эта возможность не является стандартной и стандартизировать её пока никто не собирается. Не используйте её на сайтах, смотрящих во внешний мир: она будет работать не у всех пользователей. Также могут присутствовать большие несовместимости между реализациями и её поведение может в будущем измениться.

Метод **`getVRDisplays()`** интерфейса `Navigator` возвращает промис, из которого можно получить массив объектов `VRDisplay` (en-US), представляющие доступные VR-устройства, подключенные к компьютеру.

Синтаксис
---------

```js
getVRDisplays()
```

### Параметры

Отсутствуют.

### Возвращаемое значение

Промис, который будет содержать массив объектов `VRDisplay` (en-US).

Примеры
-------

Смотрите примеры использования в `VRDisplay` (en-US).

Спецификации
------------

#### No specification found

No specification data found for `api.Navigator.getVRDisplays`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* WebVR API


Navigator.geolocation - Интерфейсы веб API

Navigator.geolocation
=====================

Свойство **`Navigator.geolocation`** только для чтения, возвращающие объект `Geolocation`, который даёт веб контенту доступ к месторасположению устройства. Это позволяет веб-сайту или приложению предложить индивидуальный результат основанный на месторасположении пользователя.

>
> \*\*Примечание:\*\*По соображениям безопасности, когда веб-страница пытается получить доступ к информации о местоположении, пользователь получает уведомление с просьбой дать разрешение. Помните, что каждый браузер имеет свои собственные правила и методы для запроса этого разрешения.
>
>
>

Синтаксис
---------
```

geo = navigator.geolocation
```

Спецификации
------------

| Specification |
| --- |
| Geolocation API # dom-navigator-geolocation |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Использование геолокации. (en-US)


Navigator.doNotTrack - Интерфейсы веб API

Navigator.doNotTrack
====================

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Возвращает настройки пользователя do-not-track. Будет "yes" если пользователь попросил не отслеживать его на веб-сайтах, контенте, рекламе.

Синтаксис
---------
```

dnt = navigator.doNotTrack;
```

Значение отражает , что в заголовке do-not-track header, т.е. значения {"1", "0", "unspecified" }.Примечание: до Gecko 32, Gecko были использованы значения { "yes", "no", "unspecified"} (bug 887703).

Пример
------
```

dump(window.navigator.doNotTrack);
// prints "1" if DNT is enabled; "0" if the user opted-in for tracking; otherwise this is "unspecified"
```

Спецификация
------------

Tracking Preference Expression (Working проект) основан на более ранней версии этой спецификации, где `navigator.doNotTrack` **это** значение посланное заголовком `do-not-track`.

Смотрите также
--------------

* The Do Not Track field guide
Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


navigator: свойство platform - Интерфейсы веб API

navigator: свойство platform
============================

**Устарело:** Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

Доступное только для чтения свойство `platform` интерфейса `Navigator` возвращает строку с определением платформы, на которой запущен браузер.

**Примечание:** следует избегать использования методов или свойств подобных этому, чтобы получить информацию о пользовательском окружении. Вместо этого лучше использовать подход обнаружения функций.

Значение
--------

Строка с определением платформы, на которой запущен браузер, например: `"MacIntel"`, `"Win32"`, `"Linux x86_64"`, `"Linux armv81"`.

Примеры
-------

Почти всегда следует избегать использования `navigator.platform` в пользу обнаружения функций. Но есть один случай, когда `navigator.platform` может быть наименее плохим вариантом: чтобы показать пользователям совет о том какая клавиша является модификатором — командная клавиша `⌘` (в системах Apple) или управляющая клавиша `⌃` (в системах производителей, отличных от Apple):

```js
let modifierKeyPrefix = "^"; // управляющая клавиша
if (
  navigator.platform.indexOf("Mac") === 0 ||
  navigator.platform === "iPhone"
) {
  modifierKeyPrefix = "⌘"; // командная клавиша
}
```

То есть можно проверить, начинается ли `navigator.platform` с `"Mac"` или соответствует `"iPhone"`, и в зависимости от того, верно ли одно из этих значений, можно установить клавишу-модификатор, которая будет использоваться в пользовательском интерфейсе вашего веб-приложения.

Примечания по использованию
---------------------------

В системах Windows современные браузеры возвращают `"Win32"` даже если они запущены на 64-битной версии операционной системы.

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-navigator-platform-dev |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `navigator.userAgentData.platform` (en-US)


Navigator: свойство mimeTypes - Интерфейсы веб API

Navigator: свойство mimeTypes
=============================

**Устарело:** Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

Возвращает объект `MimeTypeArray` (en-US), который содержит список объектов `MimeType` (en-US), представляющий собой MIME-типы, известные браузеру.

Синтаксис
---------
```

mimeTypes = navigator.mimeTypes;
```

`mimeTypes` - объект `MimeTypeArray,` который имеет свойство `length`, а также методы `item(index)` и `namedItem(name)`.

Примеры
-------

```js
function isJavaPresent() {
  return "application/x-java-applet" in navigator.mimeTypes;
}

function getJavaPluginDescription() {
  var mimetype = navigator.mimeTypes["application/x-java-applet"];
  if (mimetype === undefined) {
    // no Java plugin present
    return undefined;
  }
  return mimetype.enabledPlugin.description;
}
```

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-navigator-mimetypes |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Navigator: свойство plugins - Интерфейсы веб API

Navigator: свойство plugins
===========================

**Устарело:** Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

Возвращает объект `PluginArray` (en-US), список плагинов установленных в приложении.

**Примечание:** Приложения, которые должны проверять наличие плагинов у браузера должны запросить navigator.plugins или `navigator.mimeTypes` с точным названием плагина, а не перебирать массив navigator.plugins сравнения имя каждого плагина. Это изменение конфиденциальности не отключает все плагины; оно просто скрывает некоторые имена плагинов от перебора.

Синтаксис
---------
```

var plugins = navigator.plugins;
```

`plugins` используется для доступа к объекту `Plugin` (en-US) или по имени, или как элемент массива..

Возвращаемое значение не массив JavaScript, но оно имеет свойство размера и поддерживает доступ к индивидуальным элементам с использованием квадратных скобок (`plugins[2]`), а также через пункт (индекс) и namedItem ("Name") методы.

Примеры
-------

Этот код показывает, как можно проверить возможность отображения PDF-файлов:

```js
if ("PDF Viewer" in navigator.plugins) {
  // браузер поддерживает просмотр PDF-файлов
}
```

Примечание
----------

`Plugin` (en-US) объект, предоставляет небольшой интерфейс для получения информации о различных плагинах, установленных в вашем браузере. Список плагинов также доступен если ввести `about:plugins` в адресную строку браузера.

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-navigator-plugins |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Navigator: метод javaEnabled() - Интерфейсы веб API

Navigator: метод javaEnabled()
==============================

**Устарело:** Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

Этот метод всегда возвращает `false`.

Синтаксис
---------

```js
javaEnabled()
```

### Параметры

Нет.

### Возвращаемое значение

Булево значение `false`.

Примеры
-------

```js
if (window.navigator.javaEnabled()) {
  // этот код не будет выполнен; условие всегда равное false
}
```

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-navigator-javaenabled |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Navigator: свойство product - Интерфейсы веб API

Navigator: свойство product
===========================

**Устарело:** Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

Значение свойства `Navigator.product` всегда равно «`Gecko`», в любом браузере. Это свойство существует только в целях совместимости.

**Примечание:** Не полагайтесь на это свойство для получения настоящего имени продукта. Все браузеры возвращают одинаковую строку «`Gecko`» в качестве значения этого свойства.

Значение
--------

Строка «`Gecko`».

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-navigator-product-dev |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Navigator.appCodeName`
* `Navigator.appName`


Navigator: appName property - Интерфейсы веб API

Navigator: appName property
===========================

**Устарело:** Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

Значение свойства `Navigator.appName` всегда равно «`Netscape`», в любом браузере. Это свойство существует только в целях совместимости.

**Примечание:** Не полагайтесь на это свойство для получения настоящего имени браузера. Все браузеры возвращают одинаковую строку «`Netscape`» в качестве значения этого свойства.

Значение
--------

Строка «`Netscape`».

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-navigator-appname-dev |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Navigator.appCodeName`
* `Navigator.product`


Navigator: свойство language - Интерфейсы веб API

Navigator: свойство language
============================

Доступное только для чтения свойство **`Navigator.language`** возвращает строку, представляющую предпочитаемый пользователем язык, как правило это язык пользовательского интерфейса браузера.

Значение
--------

Строка представляющая версию языка которая определена в стандарте RFC 5646: Теги для идентификации языков (также известном как BCP 47). Примеры валидных языковых кодов: `en`, `en-US`, `fr`, `fr-FR`, `es-ES` и т.д.

В Safari на iOS до версии 10.2 код страны возвращался в нижнем регистре: `en-us`, `fr-fr` и т.д.

Примеры
-------

### Использование конструкторов Intl для форматирования, зависящего от языка

Конструкторы `Intl` позволяют форматировать содержимое в соответствии с правилами выбранной локали. Вы можете передать им `navigator.language`, чтобы отформатировать содержимое в правилах локали, соответствующей языку пользователя:

```js
const date = new Date("2012-05-24");

const formattedDate = new Intl.DateTimeFormat(navigator.language).format(date);
```

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-navigator-language-dev |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `navigator.languages`
* `navigator`
* `Intl`


Navigator.getGamepads() - Интерфейсы веб API

Navigator.getGamepads()
=======================

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

**`Navigator.getGamepads()`** метод, возвращающий массив `Gamepad` объектов, по одному для каждого геймпада, подключённому к устройству.

Синтаксис
---------
```

 var arrayGP = navigator.getGamepads();
```

Пример
------

```js
window.addEventListener("gamepadconnected", function (e) {
  var gp = navigator.getGamepads()[0];
  console.log(
    "Gamepad connected at index %d: %s. %d buttons, %d axes.",
    gp.index,
    gp.id,
    gp.buttons.length,
    gp.axes.length,
  );
});
```

Спецификации
------------

| Specification |
| --- |
| Gamepad # dom-navigator-getgamepads |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using the Gamepad API (en-US)


Navigator.oscpu - Интерфейсы веб API

Navigator.oscpu
===============

Возвращает строку, которая идентифицирует текущую операционную систему.

Синтаксис
---------
```

oscpuInfo = window.navigator.oscpu
```

* `oscpuInfo` это строка которая имеет следующий вид:

| Операционная система | `Формат строки oscpuInfo` |
| --- | --- |
| OS/2 | OS/2 Warp x (either 3, 4 or 4.5) |
| Windows CE | WindowsCE x.y1 |
| Windows 64-bit (64-bit build) | Windows NT x.y; Win64; x64 |
| Windows 64-bit (32-bit build) | Windows NT x.y; WOW64 |
| Windows 32-bit | Windows NT x.y |
| Mac OS X (PPC build) | PPC Mac OS X x.y |
| Mac OS X (i386/x64 build) | Intel Mac OS X x.y |
| Linux 64-bit (32-bit build) | Вывод uname -s плюс "i686 on x86\_64" |
| Linux | Вывод uname -sm |

1x.y относится к версии операционной системы

Пример
------

```js
function osInfo() {
  alert(window.navigator.oscpu);
}
// returns: "Windows NT 6.0" for example
```

Примечание
----------

Если ваш код не является привилегированным (chrome или по крайней мере имеет привилегию UniversalBrowserRead), он может получить значение general.oscpu.override, а не истинной платформы.

Спецификация
------------

*Не является частью какой-либо спецификации.*


Navigator.mediaDevices - Интерфейсы веб API

Navigator.mediaDevices
======================

Свойство **`Navigator.mediaDevices`** только для чтения, возвращает объект `MediaDevices`, который предоставляет доступ к подключённым медиа-устройствам ввода, таким как камера и микрофон, а также совместное использование экрана.

Синтаксис
---------
```

var mediaDevices = navigator.mediaDevices;
```

### Возвращаемое значение

`MediaDevices` объект синглтон. Как правило, вы просто используете элементы этого объекта напрямую, например с помощью вызова `navigator.mediaDevices.getUserMedia()` (en-US).

Спецификации
------------

| Specification |
| --- |
| Media Capture and Streams # mediadevices |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Media Capture and Streams API (en-US): The entry point to the documentation about the entire media stream API.
* WebRTC API: Documentation about the WebRTC API, which is closely related.


Navigator: свойство appCodeName - Интерфейсы веб API

Navigator: свойство appCodeName
===============================

**Устарело:** Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

Значение свойства `Navigator.appCodeName` всегда равно «`Mozilla`», в любом браузере. Это свойство существует только в целях совместимости.

**Примечание:** Не полагайтесь на это свойство для получения настоящего имени продукта. Все браузеры возвращают одинаковую строку «`Mozilla`» в качестве значения этого свойства.

Значение
--------

Строка «`Mozilla`».

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-navigator-appcodename-dev |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Navigator.appName`
* `Navigator.product`


Navigator: свойство appVersion - Интерфейсы веб API

Navigator: свойство appVersion
==============================

**Устарело:** Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

Возвращает «`4.0`» или строку, представляющую информацию о версии браузера.

**Примечание:** Не полагайтесь на это свойство для получения правильной версии браузера.

Значение
--------

«`4.0`» или строка, представляющая информацию о версии браузера.

Пример
------

```js
alert(`Версия вашего браузера указана как ${navigator.appVersion}`);
```

Примечания
----------

 Свойство `window.navigator.userAgent` может содержать номер версии (например,
 «`Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape 6/6.1`»),
 но необходимо учитывать, что строка пользовательского агента может быть легко подменена, чтобы выдать себя за другой браузер или используемую платформу. Кроме того, сами поставщики браузеров относятся к этим свойствам не очень ответственно.

Свойства `window.navigator.appVersion`, `window.navigator.appName` и `window.navigator.userAgent` использовались для «снифинга», то есть попытки определить, какой браузер вы используете, и соответствующим образом скорректировать страницу. Это привело к текущей ситуации, когда браузерам приходится возвращать поддельные значения этих свойств, чтобы не быть заблокированными на некоторых веб-сайтах.

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-navigator-appversion-dev |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Navigator.vibrate() - Интерфейсы веб API

Navigator.vibrate()
===================

Метод **`Navigator.vibrate()`** пульсирует вибрационным оборудованием на устройстве, если такое аппаратное обеспечение существует. Если устройство не поддерживает вибрацию, этот метод не имеет ни какого эффекта. Если шаблон вибрации уже в процессе выполнения, когда метод вызван, предыдущий шаблон останавливается и вместо него начинается новый.

Если метод не в состоянии вибрировать из-за недействительных параметров, он вернёт `false`, иначе вернёт `true`. Если шаблон ведёт к слишком длинной вибрации, он усекается: максимальная длина зависит от конкретной реализации.

Синтаксис
---------
```

var successBool = window.navigator.vibrate(pattern);
```

*pattern*

Определяет шаблон вибрации и интервал паузы. Значение указывает на число миллисекунд вибрации или паузы, при чередовании. Вы можете указать либо одно значение (вибрировать постоянно определённое количество миллисекунд) или массив значений, поочерёдно: вибрировать, пауза, затем снова вибрировать. См. Vibration API (en-US) для уточнения деталей.

Переданное значение 0 или пустой массив, или массив содержащий все нули отменяет любой шаблон вибрации запущенный в текущий момент.

Примеры
-------

```js
window.navigator.vibrate(200); // Вибрировать 200ms
window.navigator.vibrate([
  100, 30, 100, 30, 100, 200, 200, 30, 200, 30, 200, 200, 100, 30, 100, 30, 100,
]); // Вибрировать 'SOS' на азбуке Морзе.
```

Спецификации
------------

| Specification |
| --- |
| Vibration API (Second Edition) # dom-navigator-vibrate |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Vibration API (en-US)


Navigator: метод getBattery() - Интерфейсы веб API

Navigator: метод getBattery()
=============================

**Secure context:** This feature is available only in secure contexts (en-US) (HTTPS), in some or all supporting browsers.

Метод `getBattery` предоставляет информацию о батарее устройства. Он возвращает промис, результатом обработки которого будет объект `BatteryManager`, содержащий свойства с информацией о состоянии батареи и события, которые можно обрабатывать для его контроля. Для получения более подробной информации и примеров смотрите `Battery Status API` (en-US).

**Примечание:** Доступ к этой функциональности контролируется директивой `battery` (en-US) из `Permissions-Policy` (en-US).

Синтаксис
---------

```js
getBattery()
```

### Параметры

Отсутствуют.

### Возвращаемое значение

`Promise`, который будет содержать объект `BatteryManager`.

### Исключения

`NotAllowedError` `DOMException` (en-US)

Использование этой функциональности заблокировано Permissions Policy.

`SecurityError` `DOMException` (en-US)

Агент пользователя не предоставляет информацию о батарее в небезопасном контексте, и этот метод был вызван из такого контекста.

Примеры
-------

В этом примере показано получение текущего состояния зарядки батареи и установка обработчика события `chargingchange` (en-US), чтобы можно было записать состояние, когда оно изменится.

```js
let batteryIsCharging = false;

navigator.getBattery().then((battery) => {
  batteryIsCharging = battery.charging;

  battery.addEventListener("chargingchange", () => {
    batteryIsCharging = battery.charging;
  });
});
```

Для подробностей и дополнительных примеров смотрите `Battery Status API` (en-US).

Спецификации
------------

| Specification |
| --- |
| Battery Status API # dom-navigator-getbattery |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Battery Status API (en-US)
* Директива `battery` (en-US) из `Permissions-Policy` (en-US)


Navigator: свойство languages - Интерфейсы веб API

Navigator: свойство languages
=============================

Доступное только для чтения свойство **`Navigator.languages`** возвращает массив строк, представляющих предпочтительные для пользователя языки. Язык представляется кодом в соответствии со стандартом RFC 5646: Теги для идентификации языков (также известном как BCP 47). Возвращаемый массив отсортирован в порядке наибольшего предпочтения пользователем.

Значение `navigator.language` является первым элементом данного массива.

Если происходит изменение предпочтительных для пользователя языков, то вызывается событие `languagechange` (en-US) объекта `Window`.

HTTP-заголовок `Accept-Language` в каждом HTTP-запросе от браузера пользователя использует такое же значение как и в свойстве `navigator.languages`, если не считать дополнительное поле `qvalues` (значения качества), например: `en-US;q=0.8`.

Значение
--------

Массив строк.

Примеры
-------

### Вывод содержимого navigator.language и navigator.languages

```js
navigator.language; // "en-US"
navigator.languages; // ["en-US", "zh-CN", "ja-JP"]
```

### Использование конструкторов Intl для форматирования, зависящего от языка

Массив идентификаторов языка, содержащийся в `navigator.languages`, может быть передан в конструкторы `Intl`. Будет использована первая поддерживаемая `Intl` локаль из переданного списка:

```js
const date = new Date("2012-05-24");

const formattedDate = new Intl.DateTimeFormat(navigator.languages).format(date);
```

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-navigator-languages-dev |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `navigator.language`
* `navigator`
* Событие `languagechange` (en-US)
* `Intl`


Navigator.sendBeacon() - Интерфейсы веб API

Navigator.sendBeacon()
======================

Метод **`navigator.sendBeacon()`** используется для асинхронной передачи небольшого количества информации поверх HTTP веб-серверу.

Синтаксис
---------
```

navigator.sendBeacon(url [, data]);
```

### Параметры

`url`

Параметр `url` устанавливает адрес, на который будут переданы данные параметра `data`.

`data` Необязательный

Параметр `data` может содержать объект типа `ArrayBufferView` (en-US), `Blob`, `DOMString`, или `FormData`, который будет передан.

**Примечание:** Использует метод POST при передаче данных

### Возвращаемые значения

**`sendBeacon()`** возвращает `true`, если браузер успешно поставил данные `data` в очередь отправления, в ином случае `false`.

Описание
--------

Метод предназначен, главным образом, для передачи данных аналитики и диагностики на сервер, перед тем как страница будет закрыта. Так как отправление данных до закрытия страницы может привести к не достаточно полному сбору информации. Стандартный асинхронный `XMLHttpRequest` не подходит для этих целей, потому что большинство браузеров игнорируют его в событии `unload (en-US)`.

Для решения этой проблемы ранее использовали синхронный `XMLHttpRequest` вызванный в событии `unload` или `beforeunload (en-US)` с данными для передачи. Синхронный `XMLHttpRequest` блокирует процесс выгрузки документа и текущая страница закрывается не сразу. Ситуация усугубляется, если пользователь уходит с вашей страницы по ссылке или нажимает кнопку "назад". Новая страница не будет загружена в этой вкладке, пока не выгрузится старая. В глазах пользователя, новая страница выглядит заторможенной, хотя на самом деле, это связанно с текущей, выгружаемой, страницей.

Существуют и другие способы обойти эту проблему. Один из них - создание элемента `<img>` и установка атрибута `src` в событии выгрузки. Это может сработать, потому что большинство браузеров остановят основной процесс, а вместе с ним и выгрузку страницы, до загрузки изображения. Ещё один способ - создать пустой цикл на несколько секунд, таким образом придержав основной поток и дав асинхронному `XMLHttpRequest` выполниться.

Но, проблема в том, что все эти методы не надёжны и приводят к значительным задержкам отклика интерфейса браузера. Не говоря о том, что всё это - плохой стиль написания кода.

В примере ниже показан код отправления аналитики при помощи синхронного `XMLHttpRequest` в событии выгрузки страницы. Это решение приведёт к задержке отклика интерфейса браузера. Не используйте это.

```js
window.addEventListener("unload", logData, false);

function logData() {
  var client = new XMLHttpRequest();
  client.open("POST", "/log", false); // последний параметр устанавливает синхронный стиль
  client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
  client.send(analyticsData);
}
```

Здесь-то и найдётся применение **`sendBeacon()`**. При использовании метода `sendBeacon()`, данные будут переданы на сервер асинхронно, как только браузер найдёт оптимальный момент для этого. Это не вызовет задержек выгрузки и не повлияет на время загрузки следующей страницы. Решает все проблемы при отправлении аналитики: данные надёжно доставляются, это происходит асинхронно, не влияет на время выгрузки и загрузки страниц. Кроме того, код выглядит проще, чем при использовании прочих ухищрений.

Следующий пример покажет, как сделать отправление аналитики красиво и просто с помощью `sendBeacon()`.

```js
window.addEventListener("unload", logData, false);

function logData() {
  navigator.sendBeacon("/log", analyticsData);
}
```

Спецификация
------------

| Specification |
| --- |
| Beacon # sendbeacon-method |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `navigator`
* `WorkerNavigator.sendBeacon()` (Использование `sendBeacon()` в workers)


NetworkInformation.connection - Интерфейсы веб API

NetworkInformation.connection
=============================

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

**`NetworkInformation.connection`** свойство только для чтения представляющее собой `Connection` (en-US) содержащий информацию о системном подключении, таких как текущая пропускная способность пользовательского устройства или определено ли соединение. Это может быть использовано для выбора контента высокой плотности или контента низкой плотности в соединении пользователя.

Синтаксис
---------
```

connectionInfo = navigator.connection
```

Спецификации
------------

| Specification |
| --- |
| Network Information API # connection-attribute |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Network Information API (en-US)
* Онлайн- и офлайн-события
* Firefox OS Image Uploader Sample App


Navigator.getUserMedia() - Интерфейсы веб API

Navigator.getUserMedia()
========================

**Устарело:** Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

The deprecated **`Navigator.getUserMedia()`** method prompts the user for permission to use up to one video input device (such as a camera or shared screen) and up to one audio input device (such as a microphone) as the source for a `MediaStream`.

If permission is granted, a `MediaStream` whose video and/or audio tracks come from those devices is delivered to the specified success callback. If permission is denied, no compatible input devices exist, or any other error condition occurs, the error callback is executed with a `MediaStreamError` object describing what went wrong. If the user instead doesn't make a choice at all, neither callback is executed.

**Примечание:** Это устаревший метод. Вместо этого используйте более новую версию `navigator.mediaDevices.getUserMedia ()`. Хотя технически не рекомендуется, эта старая версия колбэка помечена как таковая, поскольку спецификация настоятельно рекомендует использовать более новую версию, возвращающую промис.

Синтаксис
---------
```

navigator.getUserMedia(constraints, successCallback, errorCallback);
```

### Параметры

`constraints`

`MediaStreamConstraints` (en-US) объект, определяющий типы запрашиваемых медиа, а также любые требования для каждого типа. Подробнее см. В разделе ограничений современного метода `MediaDevices.getUserMedia ()`, а также в статье Возможности, ограничения и настройки. (en-US)

`successCallback`

Функция, которая вызывается при утверждении запроса на доступ к мультимедиа. Функция вызывается с одним параметром: объектом `MediaStream`, который содержит медиапоток. Затем колбэк может назначить поток желаемому объекту (например, элементу `<audio>` или `<video>`), как показано в следующем примере:

```js
function(stream) {
   var video = document.querySelector('video');
   video.srcObject = stream;
   video.onloadedmetadata = function(e) {
      // Do something with the video here.
   };
}
```

`errorCallback`

When the call fails, the function specified in the `errorCallback` is invokedwith a `MediaStreamError` object as its sole argument; this object is is modeled on `DOMException` (en-US). See Ошибки below for a list of the errors which can occur.

### Возвращающееся значение

`undefined`.

Примеры
-------

### Width and height (Ширина и высота)

Это пример использования `getUserMedia()` , включая код для работы с префиксами различных браузеров. Обратите внимание, что это устаревший способ сделать это: современные примеры см. В разделе «Примеры» в разделе `MediaDevices.getUserMedia ()`.

```js
navigator.getUserMedia =
  navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia;

if (navigator.getUserMedia) {
  navigator.getUserMedia(
    { audio: true, video: { width: 1280, height: 720 } },
    function (stream) {
      var video = document.querySelector("video");
      video.srcObject = stream;
      video.onloadedmetadata = function (e) {
        video.play();
      };
    },
    function (err) {
      console.log("The following error occurred: " + err.name);
    },
  );
} else {
  console.log("getUserMedia not supported");
}
```

Разрешения
----------

Чтобы использовать `getUserMedia()` в устанавливаемом приложении (например, приложении Firefox OS), вам необходимо указать одно или оба из следующих полей внутри файла манифеста:

```js
"permissions": {
  "audio-capture": {
    "description": "Required to capture audio using getUserMedia()"
  },
  "video-capture": {
    "description": "Required to capture video using getUserMedia()"
  }
}
```

См. Разрешение: аудио-захват и разрешение: видео-захват для получения дополнительной информации.

**Предупреждение:** New code should use `Navigator.mediaDevices.getUserMedia()` (en-US) instead.

Спецификации
------------

| Specification |
| --- |
| Media Capture and Streams # dom-navigator-getusermedia |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `MediaDevices.getUserMedia()` that replaces this deprecated method.
* WebRTC (en-US) - the introductory page to the API
* MediaStream API (en-US) - the API for the media stream objects
* Taking webcam photos (en-US) - a tutorial on using `getUserMedia() for taking photos rather than video.`


Navigator.registerProtocolHandler() - Интерфейсы веб API

Navigator.registerProtocolHandler()
===================================

Позволяет веб-сайтам зарегистрировать себя как возможный обработчик для конкретных протоколов.

По соображениям безопасности, по умолчанию, веб-сайты могут зарегистрировать только обработчики протокола для себя - домен и протокол обработчика должны совпадать с текущим сайтом. Тем не менее, пользователи могут установить предпочтение в Firefox, разрешающее перекрёстную обработку веб-сайтов в настройках `gecko.handlerService.allowRegisterFromDifferentHost` установив `true` в about:config.

Расширения могут регистрировать обработчики протоколов, направленные другие сайты: см. "Смотрите также" раздел как использовать их с XPCOM.

Синтаксис
---------
```

window.navigator.registerProtocolHandler(protocol, uri, title);
```

* `protocol` это протокол нуждающийся в обработке, записанный в виде строки.
* `uri` это URI обработчика в виде строки. Вы можете включить "%s", что бы показать куда вставлять выходящие URI документа для обработки.

**Примечание:** Примечание: ДОЛЖНА быть `http` или `https` схема
* `title` это заголовок обработчика, представленный пользователю в виде строки.
Пример
------

Если ваше веб-приложение находится по адресу `http://www.google.co.uk`, вы можете зарегистрировать обработчик протокола и привязать обращение к нему "burger", как это:
```

navigator.registerProtocolHandler("burger",
                                  "http://www.google.co.uk/?uri=%s",
                                  "Burger handler");
```

Это создаст обработчик, который разрешает `burger://`ссылки, направляющие пользователя на ваше веб-приложение, вставляя burger информацию указанную в ссылке на URL. Напомним, что этот скрипт должен быть запущен с того же домена (так и любой странице расположенной в `google.co.uk`) и второе, переданный аргумент должен быть `http` или `https` схемы (в этом примере это `http`) .

Пользователь будет уведомлен о регистрации этого протокола, для примера смотрите на изображение ниже.

![](/ru/docs/Web/API/Navigator/registerProtocolHandler/protocolregister.png)

**Примечание:** "Регистрация службы веб-почты, как mailto-обработчик", показывает как сделать это в рамках XPCOM.

Спецификация
------------

Specified by the WHATWG's Web Applications 1.0 working draft (HTML5).

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Web-based protocol handlers
* RegisterProtocolHandler Enhancing the Federated Web at Mozilla Webdev
* Web Application APIs - Custom scheme and content handlers - Whitelisted schemes
* Register a webmail service as mailto handler shows how to do `registerProtocolHandler` from XPCOM scope.
* XPCOM Interface Reference > nsIWebContentHandlerRegistrar > registerContentHandler - This shows how to use this function XPCOM scope


Navigator.serviceWorker - Интерфейсы веб API

Navigator.serviceWorker
=======================

Свойство только-для-чтения **Navigator.serviceWorker** возвращает объект `ServiceWorkerContainer`, который предоставляет доступ к регистрации, удалению, обновлению и взаимодействию с объектами `ServiceWorker` для соответствующего документа.

Синтаксис
---------
```

var workerContainerInstance = navigator.serviceWorker;
```

### Значение

Объект `ServiceWorkerContainer`.

Спецификации
------------

| Specification |
| --- |
| Service Workers # navigator-service-worker-attribute |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* ServiceWorker API (en-US)
* Использование Service Workers (en-US)


Navigator.cookieEnabled - Интерфейсы веб API

Navigator.cookieEnabled
=======================

Возвращает логическое значение (Boolean), показывающее включены ли куки или нет.(свойство только для чтения.

Синтаксис
---------
```

var cookieEnabled = navigator.cookieEnabled;
```

* `cookieEnabled` is a Boolean `true` or `false`.
Пример
------

```js
if (!navigator.cookieEnabled) {
  // пусть пользователь знает, что включённые куки делают страницу более полезной.
```

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-navigator-cookieenabled-dev |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Спецификация
------------

HTML WHATWG


TouchEvent.touches - Интерфейсы веб API

TouchEvent.touches
==================

**`touches`** это доступный только для чтения список `TouchList`, в котором перечислены все объекты `Touch` для точек контакта с сенсорной поверхностью, независимо от того, изменились ли они и какой целевой элемент был у них во время события `touchstart (en-US)`.

Вы можете воспринимать это как перечисление отдельных пальцев, которые могут быть идентифицированы при касании экрана.

Синтаксис
---------
```

var touches = touchEvent.touches;
```

### Возвращаемое значение

`touches`

Список `TouchList` всех объектов `Touch` для точек контакта с сенсорной поверхностью, независимо от того, изменились ли они и какой целевой элемент был у них во время события `touchstart (en-US)`.

Пример
------

Этот пример демонстрирует свойство `TouchEvent.touches` объекта `TouchEvent`. Свойство `TouchEvent.touches` это объект `TouchList`, который содержит список объектов `Touch` для каждой активной точки контакта с сенсорной поверхностью.

В следующем фрагменте кода обработчик события `touchstart (en-US)` проверяет длину списка `TouchEvent.touches` для определения количества точек касаний, которые были активированы, а затем вызывает разные обработчики в зависимости от количества таких точек.

```js
someElement.addEventListener(
  "touchstart",
  function (e) {
    // Вызов определённого обработчика, в зависимости от
    // количества точек касания
    switch (e.touches.length) {
      case 1:
        handle\_one\_touch(e);
        break;
      case 2:
        handle\_two\_touches(e);
        break;
      case 3:
        handle\_three\_touches(e);
        break;
      default:
        console.log("Not supported");
        break;
    }
  },
  false,
);
```

Спецификации
------------

| Specification |
| --- |
| Touch Events # dom-touchevent-touches |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


TouchEvent.altKey - Интерфейсы веб API

TouchEvent.altKey
=================

Сводка
------

Логическое (`Boolean`) значение, показывающее, была ли активирована клавиша `alt` (Alternate), когда событие касания было создано. Если клавиша `alt` активирована, значение равно `true`. В противном случае оно равно `false`.

Данное свойство предназначено Только для чтения .

Синтаксис
---------
```

var altEnabled = touchEvent.altKey;
```

### Возвращаемое значение

`altEnabled`

`true` если клавиша

`alt`

активирована для данного события; и `false` если нет.

Пример
------

Данный пример демонстрирует доступ к свойствам клавиш-модификаторов события `TouchEvent`: `TouchEvent.altKey`, `TouchEvent.ctrlKey` (en-US), `TouchEvent.metaKey` (en-US) и `TouchEvent.shiftKey` (en-US).

В фрагменте кода ниже обработчик события `touchstart (en-US)` логирует состояние клавиш-модификаторов события.

```js
someElement.addEventListener(
  "touchstart",
  function (e) {
    // Log the state of this event's modifier keys
    console.log("altKey = " + e.altKey);
    console.log("ctrlKey = " + e.ctrlKey);
    console.log("metaKey = " + e.metaKey);
    console.log("shiftKey = " + e.shiftKey);
  },
  false,
);
```

Спецификации
------------

| Specification |
| --- |
| Touch Events # dom-touchevent-altkey |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


TouchEvent.changedTouches - Интерфейсы веб API

TouchEvent.changedTouches
=========================

Сводка
------

`TouchList` список точек касания (объекта `Touch`), смысл которых зависит от типа события:

* Для события `touchstart`, это список точек касания, в которых появилось взаимодействие с поверхностью экрана.
* Для события `touchmove`, это список точек касания, которые изменились с момента последнего события.
* Для события `touchend`, это список точек касания, на которых прекратилось взаимодействие с поверхностью экрана (т. е. набор точек, где прервалось касание пальцами).

Это свойство предназначено Только для чтения .

Синтаксис
---------
```

var changes = touchEvent.changedTouches;
```

### Возвращаемое значение

`changes`

Список `TouchList` объекта `Touch` в котором содержатся все точки касания для данного события.

Пример
------

Этот пример демонстрирует свойство `TouchEvent.changedTouches` объекта `TouchEvent`. Свойство `TouchEvent.changedTouches` это — объект `TouchList`, который содержит объект `Touch` для каждой точки, где произошло событие.

В этом фрагменте кода обработчик события `touchmove (en-US)` выполняет перебор списка `changedTouches` и выводит в консоль идентификатор каждой точки касания, где произошло изменение с последнего события.

```js
someElement.addEventListener(
  "touchmove",
  function (e) {
    // Iterate through the list of touch points that changed
    // since the last event and print each touch point's identifier.
    for (var i = 0; i < e.changedTouches.length; i++) {
      console.log(
        "changedTouches[" +
          i +
          "].identifier = " +
          e.changedTouches[i].identifier,
      );
    }
  },
  false,
);
```

Спецификации
------------

| Specification |
| --- |
| Touch Events # dom-touchevent-changedtouches |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Geolocation.getCurrentPosition() - Интерфейсы веб API

Geolocation.getCurrentPosition()
================================

**Secure context:** This feature is available only in secure contexts (en-US) (HTTPS), in some or all supporting browsers.

Метод **`Geolocation.getCurrentPosition()`** используется для получения текущего местоположения устройства.Синтаксис
---------
```

navigator.geolocation.getCurrentPosition(success[, error[, options]])
```

### Параметры

`success`

Колбэк-функция, которая принимает объект `Position` (en-US) в качестве единственного входного параметра.

`error` Необязательный

Необязательная колбэк-функция, принимающая объект `PositionError` как единственный входной параметр.

`options` Необязательный

 Необязательный объект `PositionOptions` (en-US).
 Включает в себя

* `maximumAge`: целое число (миллисекунды) | infinity - максимальное время кеширования позиции.
* `timeout`: целое число (миллисекунды) - количество времени до вызова callback ошибки. Если 0, вызов не происходит.
* `enableHighAccuracy`: false | true

Пример
------

```js
var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0,
};

function success(pos) {
  var crd = pos.coords;

  console.log("Ваше текущее местоположение:");
  console.log(`Широта: ${crd.latitude}`);
  console.log(`Долгота: ${crd.longitude}`);
  console.log(`Плюс-минус ${crd.accuracy} метров.`);
}

function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
}

navigator.geolocation.getCurrentPosition(success, error, options);
```

Спецификации
------------

| Specification |
| --- |
| Geolocation API # getcurrentposition-method |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Using geolocation (en-US)
* `Navigator.geolocation`


BackgroundFetchRegistration.result - Интерфейсы веб API

BackgroundFetchRegistration.result
==================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Доступное только для чтения свойство **`result`** интерфейса `BackgroundFetchRegistration` возвращает строку, которая указывает на то, был фоновый запрос успешным ли неудачным.

Если значение этого свойства поменялось, то в связанном объекте `BackgroundFetchRegistration` наступает событие progress.

Значение
--------

Одна из следующих строк:

`""`

Запрос активен, так что пока нет результата.

`"success"`

Запрос был успешен.

`"failure"`

Фоновый запрос завешился неудачей. Это происходит только тогда, когда браузер не может повторить попытку.

Примеры
-------

Вывод этого свойства в консоль возвращает строку, указывающую на статус, либо пустую строку, если запрос всё ещё активен.

```js
console.log(bgFetch.result);
```

Спецификации
------------

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchregistration-result |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


BackgroundFetchRegistration.recordsAvailable - Интерфейсы веб API

BackgroundFetchRegistration.recordsAvailable
============================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Доступное только для чтения свойство **`recordsAvailable`** интерфейса `BackgroundFetchRegistration` возвращает `true` если есть запросы и ответы, к которым необходимо получить доступ. Если же возвращает `false`, то `match()` и `matchAll()` не могут быть использованы.

Значение
--------

`boolean`.

Примеры
-------

Вывод этого свойства в консоль возвращает `true` или `false` чтобы указать, есть ли записи.

```js
console.log(bgFetch.recordsAvailable);
```

Спецификации
------------

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchregistration-recordsavailable |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.