Метод 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 | Початкова виознака |
Підтримка веб-переглядачами
BCD tables only load in the browser
Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію https://github.com/mdn/browser-compat-data.