В мире веб-разработки взаимодействие с окном браузера — это неотъемлемая часть создания интерактивного пользовательского интерфейса. Объект window в JavaScript позволяет отслеживать различные события, такие как изменение размера, потеря фокуса, выход со страницы и многое другое. Эта статья поможет вам разобраться в самых полезных событиях окна и научит использовать их на практике.

Что такое window и зачем он нужен?

Объект window — это глобальный объект, доступный в любом скрипте, который запускается в браузере. Он представляет собой само окно браузера и предоставляет доступ ко множеству методов, свойств и событий, с помощью которых вы можете контролировать поведение страницы и реагировать на действия пользователя.

Чем отличается window от document и screen?

Основные события window и как с ними работать

Ниже рассмотрим наиболее важные события и реальные ситуации, где они действительно полезны.

load: полная загрузка страницы

Событие load срабатывает, когда HTML-документ, стили, изображения и другие ресурсы полностью загружены и готовы к работе.

window.addEventListener('load', () => {
    console.log('Страница полностью загружена');
});

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

resize: изменение размеров окна

Очень полезное событие для адаптивного дизайна. Позволяет отследить, когда пользователь изменяет размеры окна.

window.addEventListener('resize', () => {
    const w = window.innerWidth;
    const h = window.innerHeight;
    document.body.style.backgroundColor = w < 600 ? '#ffdede' : '#defff0';
});

Когда использовать: если вам необходимо динамически измененить интерфейс, перестроить сетку, управлять элементами, делать расчеты на основании показателей ширины/высоты окна.

scroll: отслеживание прокрутки

Позволяет отследить, насколько пользователь проскроллил страницу. Часто используется для анимаций или ленивой загрузки.

window.addEventListener('scroll', () => {
    const progress = window.scrollY / (document.body.scrollHeight - window.innerHeight);
    console.log(`Прокрутка: ${Math.round(progress * 100)}%`);
});

Когда использовать: параллакс-эффекты, отображение кнопки "вверх", подгрузка данных.

beforeunload: предупреждение перед уходом

Срабатывает, когда пользователь пытается закрыть вкладку или перезагрузить страницу.

window.addEventListener('beforeunload', (e) => {
    e.preventDefault();
    e.returnValue = '';
    //  при закрытии страницы появится предупреждающее окно
});

Когда использовать: защита форм от случайного закрытия, напоминание о несохранённой информации, дополнительная задержка пользователя на странице.

unload: страница покидается

Это событие наступает в момент, когда пользователь закрывает вкладку страницы, обновляет ее или переходит по другой ссылке. Используется для последней отправки данных или очистки.

window.addEventListener('unload', () => {
    navigator.sendBeacon('/log', JSON.stringify({ action: 'user_left' }));
    // на сервер безопасно отправляются данные в фоновом режиме
});

Когда использовать: отправка статистики, закрытие соединений, сохранение сессии.

online и offline: отслеживание статуса сети

Помогают адаптировать поведение приложения, если пользователь теряет или восстанавливает интернет-соединение.

window.addEventListener('online', () => {
    alert('Соединение восстановлено!');
});

window.addEventListener('offline', () => {
    alert('Вы отключены от сети. Работа в оффлайн-режиме.');
});

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

focus и blur: активность окна

focus срабатывает, когда пользователь возвращается на вкладку, а blur — когда уходит с неё.

window.addEventListener('blur', () => {
    document.title = 'Вы ушли со страницы...';
});

window.addEventListener('focus', () => {
    document.title = '👋 Добро пожаловать обратно!';
});

Когда использовать: приостановка анимаций, пауза видео, изменение заголовков вкладки.

message: обмен сообщениями между окнами

Используется для безопасной передачи данных между окнами (например, если у вас есть всплывающее окно или iframe).

window.addEventListener('message', (event) => {
    if (event.data.type === 'show-alert') {
        alert(event.data.message);
    }
});

Когда использовать: коммуникация между iframe и родителем, мультивкладочные приложения.

Заключение

События window — это ключ к созданию реактивного интерфейса. От обработки загрузки и изменения размеров до управления соединением и вкладками — всё это улучшает взаимодействие с пользователем.

Краткий чеклист для использования:

• Загрузи данные после полной загрузки — DOMContentLoaded или load
• Подстрой интерфейс под размеры экрана — resize
• Сделай прокрутку полезной — scroll
• Защити формы — beforeunload
• Отправь логи перед выходом — unload
• Поддержи оффлайн-режим — offline/online
• Учитывай фокус — focus/blur
• Обменивайся данными между окнами — message