MediaQueryList.addListener()
Метод addListener()
інтерфейсу MediaQueryList
додає слухача до MediaQueryListener
, який викличе вказану функцію щойно стан медіа-запиту зміниться.
Цей метод є простим скороченням для EventTarget.addEventListener()
(en-US) задля зворотньої сумісності. В старших веб-переглядачах доводиться використовувати addListener
замість addEventListener
, тоді як в нових MediaQueryList
просто успадковує EventTarget
.
Синтаксис
MediaQueryList.addListener(func)
Параметри
func
- Функція-слухач, яку буде викликано щораз, як зміниться стан медіа-запиту. В первинній реалізації слухачем був об'єкт
MediaQueryListListener
(en-US), а в новій вже використано звичайний механізм подій, тож слухач — це звичайна функція, а об'єкт подіїMediaQueryListEvent
(en-US) успадковано від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