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);

• Медіа-запити
• Використання медіа-запитів у коді
• window.matchMedia()
• MediaQueryList
• MediaQueryListEvent