Обработка события изменения размера окна в JavaScript

Быстрый ответ

Для того чтобы отслеживать события изменения размера окна, используйте метод window.addEventListener:

window.addEventListener('resize', () => {
  console.log(`Новые размеры: ${window.innerWidth}x${window.innerHeight}`);
});

Таким образом, при каждом изменении размера окна будет выводиться его текущее разрешение.

Управление изменениями размера окна

Обработка событий изменения размера помогает обеспечить совместимость и отзывчивость интерфейса на различных устройствах и в браузерах.

Поддержка в разных браузерах

Учитывая совместимость веб-браузеров, таких как Firefox, Safari или IE, а также специфику мобильных браузеров, включающих orientationchange, важно адаптировать код для работы в разнообразных условиях.

if (window.addEventListener) {
  window.addEventListener('resize', handleResize);
} else if (window.attachEvent) {
  window.attachEvent('onresize', handleResize);
} else {
  // Если старые методы не поддерживаются, проблема скорее всего в браузере
}

Подробнее об этом расскажет наш спикер на видео

Уменьшение частоты обработки событий

Функция задержки (debounce) помогает избежать проблем с производительностью, ограничивая частоту вызовов обработчика событий:

function debounce(func, wait) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, arguments), wait);
  };
}

Так, обработчик resize срабатывает только после определённого временного интервала (задержки).

Особенности мобильных устройств: событие orientationchange

На мобильных устройствах обработка изменения ориентации экрана осуществляется через событие orientationchange:

window.addEventListener('orientationchange', () => {
  // Независимо от ориентации, интерфейс должен быть удобным
});

Визуализация

Допустим, у вас есть адаптивная сцена концерта, которая способна менять свой размер и расположение элементов:

До изменения размера: [🎸🥁🎸]
После изменения размера: [🎸🥁]

Для обеспечения адаптивности интерфейса используйте следующий подход:

window.addEventListener('resize', () => {
  // Меняем конфигурацию сцены в соответствии с новыми условиями
});

Благодаря такому коду интерфейс будет корректно реагировать на изменение размеров и сохранять работоспособность.

Улучшение обработки событий изменения размера

ResizeObserver: наблюдение за элементами

ResizeObserver позволяет отслеживать изменения размеров конкретных элементов:

const ro = new ResizeObserver(entries => {
  // Элементы меняют свои размеры, подобно одежде, сшитой по индивидуальным меркам
});

Этот инструмент точно реагирует на любые изменения размеров, гарантируя идеальное соответствие.

Продвинутая оптимизация: Тротлинг

Троттлинг ограничивает частоту выполнения функции, аналогично обдуманному решению:

function throttle(func, wait) {
  let timeout;
  return function() {
    if (!timeout) {
      timeout = setTimeout(() => {
        func.apply(this, arguments);
        timeout = null;
      }, wait);
    }
  };
}

Такая реализация позволяет resize срабатывать с фиксированной периодичностью.

Доступность: учет вспомогательных технологий

Также необходимо учитывать возможное использование вспомогательных технологий:

window.addEventListener('resize', () => {
  // Не забывайте о важности доступности интерфейса для всех пользователей
});

Полезные материалы

1. Window: resize event – Web APIs | MDN — Детальное описание события изменения размера окна.
2. Done Resizing Event | CSS-Tricks — Советы по обработке событий изменения размера.
3. Debouncing and Throttling Explained Through Examples | CSS-Tricks — Основы эффективной обработки событий.
4. Event reference | MDN — Всё о событиях в JavaScript.
5. Window sizes and scrolling — Как контролировать размеры и прокрутку окна.
6. JavaScript Debounce Function — Создание функции задержки для управления событиями.
7. Event – Web APIs | MDN — Исследование интерфейса Event и его применений.