Тестирование медиавыражений программно
======================================

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

Создание списка медиавыражений
------------------------------

Прежде, чем вы сможете оценить результаты медиавыражений, вам необходимо создать объект `MediaQueryList` (en-US), отражающий выражение. Для этого используется метод `window.matchMedia`.

Например, настройка списка выражений, который определяет, находится ли устройство в альбомной или книжной ориентации:


```js
var mediaQueryList = window.matchMedia("(orientation: portrait)");
```

Проверка результата выражения
-----------------------------

После того, как вы создали свой список медиавыражений, вы можете проверить результат выражения, посмотрев на значение его свойства `matches`:


```js
if (mediaQueryList.matches) {
  /\* Окно просмотра в настоящее время находится в книжной ориентации \*/
} else {
  /\* Окно просмотра в настоящее время находится в альбомной ориентации \*/
}
```

Получение уведомлений о выражениях
----------------------------------

Если вам необходимо постоянно следить за изменениями в результате выражения, эффективнее зарегистрировать обработчик, чем вытаскивать результат выражений. Для этого вызовите метод `addListener()` объекта `MediaQueryList` (en-US) с функцией колбэка, которая вызывается при изменении статуса медиавыражения (например, тест медиавыражения переходит от `true` к `false`):


```js
var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Создание списка выражений.
function handleOrientationChange(mql) { ... } // Определение колбэк-функции для обработчика событий.
mediaQueryList.addListener(handleOrientationChange); // Добавление колбэк-функции в качестве обработчика к списку выражений.

handleOrientationChange(mediaQueryList); // Запуск обработчика изменений, один раз.
```


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

Функция `handleOrientationChange()` будет следить за результатом выражения и обрабатывать все, что нам нужно сделать при изменении ориентации:


```js
function handleOrientationChange(evt) {
  if (evt.matches) {
    /\* Окно просмотра в настоящее время находится в книжной ориентации \*/
  } else {
    /\* Окно просмотра в настоящее время находится в альбомной ориентации \*/
  }
}
```


Выше, мы определяем параметры как `evt` — event объект. Это имеет значение, поскольку новые реализации `MediaQueryList` (en-US) обрабатывают события стандартным способом. Они больше не используют нестандартный механизм `MediaQueryListListener` (en-US) , а используют стандартную настройку обработчика событий, передавая объект event `MediaQueryListEvent` (en-US) как аргумент колбэк-функции.

Этот event объект также включает свойства `media` (en-US) и `matches` (en-US), поэтому вы можете запросить эти свойства `MediaQueryList` путём прямого доступа к нему или доступа к event объекту.

Уведомление о завершении выражения
----------------------------------

Для прекращения уведомлений об изменении значения вашего медиавыражения вызовите метод `removeListener()` для `MediaQueryList` (en-US), передав ему имя, ранее определённой функции:


```js
mediaQueryList.removeListener(handleOrientationChange);
```

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

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

See also
--------

* Media queries (en-US)
* `window.matchMedia()`
* `MediaQueryList` (en-US)
* `MediaQueryListEvent` (en-US)