MediaQueryList.addListener()

Метод addListener() інтерфейсу MediaQueryList додає слухача до MediaQueryListener, який викличе вказану функцію щойно стан медіа-запиту зміниться.

Цей метод є простим скороченням для EventTarget.addEventListener() задля зворотньої сумісності. В старших веб-переглядачах доводиться використовувати addListener замість addEventListener, тоді як в нових MediaQueryList просто успадковує EventTarget.

Синтаксис

MediaQueryList.addListener(func)

Параметри

func
Функція-слухач, яку буде викликано щораз, як зміниться стан медіа-запиту. В первинній реалізації слухачем був об'єкт MediaQueryListListener, а в новій вже використано звичайний механізм подій, тож слухач — це звичайна функція, а об'єкт події MediaQueryListEvent успадковано від Event.

Вертає

Нічого.

Приклади

var mql = window.matchMedia('(max-width: 600px)');

function screenTest(e) {
  if (e.matches) {
    // Вікно є вужчим за 600 пікселів (або ж точно 600)
    para.textContent = 'Маємо вузький екран, щонайбільше 600px';
    document.body.style.backgroundColor = 'red';
  } else {
    // Вікно є ширшим за 600 пікселів
    para.textContent = 'Маємо широкий екран — понад 600px завширшки';
    document.body.style.backgroundColor = 'blue';
  }
}

mql.addListener(screenTest);

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

Специфікація Статус Примітка
CSS Object Model (CSSOM) View Module
The definition of 'addListener' in that specification.
Working Draft Початкова виознака

Підтримка веб-переглядачами

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
addListener()Chrome Full support 9Edge Full support 12Firefox Full support 6IE Full support 10Opera Full support 12.1Safari Full support 5.1
Notes
Full support 5.1
Notes
Notes Prior to Safari 14, MediaQueryList is based on EventTarget, so you must use addListener() and removeListener() to observe media query lists.
WebView Android Full support YesChrome Android Full support 18Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5
Notes
Full support 5
Notes
Notes Prior to Safari 14, MediaQueryList is based on EventTarget, so you must use addListener() and removeListener() to observe media query lists.
Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

Див. також