MediaQueryList: метод addListener()

Устаревшее: Данная функция больше не рекомендуется. Хотя некоторые браузеры могут её всё ещё поддерживать, она может быть уже удалена из соответствующих веб-стандартов, может быть в процессе удаления или поддерживается только для совместимости. Избегайте её использования и, по возможности, обновите существующий код; см. таблицу совместимости внизу этой страницы для принятия решения. Имейте в виду, что эта функция может перестать работать в любой момент.

Устаревший addListener() метод интерфейса MediaQueryList добавляет слушатель к MediaQueryListener, который выполнит пользовательскую функцию обратного вызова в ответ на изменение состояния медиа-запроса.

В старых браузерах MediaQueryList ещё не унаследовал от EventTarget, поэтому этот метод был предоставлен как псевдоним для EventTarget.addEventListener(). Используйте addEventListener() вместо addListener() , если он доступен в браузерах, которые вы поддерживаете.

Синтаксис

addListener(func)

Параметры

func: Функция или ссылка на функцию, представляющая функцию обратного вызова, которую нужно выполнить при изменении состояния медиа-запроса.

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

None (undefined).

Примеры

const paragraph = document.querySelector("p");
const mediaQueryList = window.matchMedia("(max-width: 600px)");

function screenTest(e) {
  if (e.matches) {
    /* the viewport is 600 pixels wide or less */
    paragraph.textContent = "This is a narrow screen — 600px wide or less.";
    document.body.style.backgroundColor = "pink";
  } else {
    /* the viewport is more than 600 pixels wide */
    paragraph.textContent = "This is a wide screen — more than 600px wide.";
    document.body.style.backgroundColor = "aquamarine";
  }
}

mediaQueryList.addListener(screenTest);

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

Спецификация
CSSOM View Module # dom-mediaquerylist-addlistener

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`addListener`	9	12	6	12.1	5.1	18	6	12.1	5	1.0	≤37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener