Какие события обрабатывают Document?

События объекта Document в DOM

Document как корневой узел DOM-дерева обрабатывает широкий спектр событий, которые можно разделить на несколько основных категорий. Я расскажу о ключевых группах событий, их практическом применении и приведу примеры.

Основные категории событий Document

1. События загрузки и готовности документа Эти события критически важны для корректной инициализации скриптов:

• DOMContentLoaded - срабатывает когда HTML полностью загружен и построен DOM (без ожидания стилей, изображений)
• load - срабатывает когда загружены ВСЕ ресурсы страницы
• readystatechange - отслеживает изменение состояния готовности документа
• beforeunload - перед закрытием/перезагрузкой страницы
• unload - в момент выгрузки документа

// Практический пример использования
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM построен, можно работать с элементами');
    const button = document.getElementById('myButton');
    // Безопасная работа с элементами
});

window.addEventListener('load', function() {
    console.log('Все ресурсы загружены');
});

2. События видимости страницы (Page Visibility API) Позволяют отслеживать активность пользователя на вкладке:

• visibilitychange - при изменении видимости документа

document.addEventListener('visibilitychange', function() {

    if (document.hidden) {
        console.log('Пользователь переключился на другую вкладку');
        // Приостановить анимации, видео, таймеры
    } else {
        console.log('Вкладка снова активна');
        // Возобновить работу
    }

});

**3. События фокуса**
Обработка фокуса на уровне документа:

- **focusin** - когда любой элемент получает фокус (всплывает)
- **focusout** - когда любой элемент теряет фокус (всплывает)
- ```javascript
document.addEventListener('focusin', function(event) {
    console.log('Элемент получил фокус:', event.target.tagName);
});

document.addEventListener('focusout', function(event) {
    console.log('Элемент потерял фокус:', event.target.tagName);
});

4. События указателя (мыши, касания) Хотя обычно обрабатываются на конкретных элементах, document может их перехватывать:

• click, dblclick
• mousedown, mouseup, mousemove
• touchstart, touchend, touchmove
• pointerdown, pointerup, pointermove

5. События клавиатуры Аналогично событиям мыши, могут обрабатываться на уровне документа:

• keydown, keyup, keypress (устаревшее)

Практическое применение и паттерны

Делегирование событий на уровне документа:

// Эффективный паттерн для динамических элементов
document.addEventListener('click', function(event) {
    if (event.target.matches('.dynamic-button')) {
        handleButtonClick(event.target);
    }
});

Обработка глобальных сочетаний клавиш:

document.addEventListener('keydown', function(event) {
    // Ctrl + S для сохранения
    if (event.ctrlKey && event.key === 's') {
        event.preventDefault();
        saveDocument();
    }
    
    // Escape для закрытия модальных окон
    if (event.key === 'Escape') {
        closeAllModals();
    }
});

Важные особенности и best practices

Всплытие событий: Большинство событий всплывают до document, что позволяет использовать делегирование событий. Это особенно полезно для:

• Динамически добавляемых элементов
• Уменьшения количества обработчиков
• Улучшения производительности

Отличия от window событий:

• document события связаны с содержимым документа
• window события связаны с объектом браузера

// Разница в обработке
document.addEventListener('scroll', handler); // Сработает при прокрутке документа
window.addEventListener('scroll', handler);   // Сработает при прокрутке окна

Безопасность и производительность:

• Всегда удаляйте ненужные обработчики с document
• Используйте passive: true для touch/scroll событий
• Избегайте тяжелых операций в обработчиках глобальных событий

Современные события и API

События полноэкранного режима:

document.addEventListener('fullscreenchange', function() {
    console.log('Полноэкранный режим:', 
        document.fullscreenElement ? 'включен' : 'выключен');
});

События копирования/вставки:

document.addEventListener('copy', function(event) {
    // Модификация буфера обмена
    event.clipboardData.setData('text/plain', 'Модифицированный текст');
    event.preventDefault();
});

Резиновые события (для мобильных устройств):

document.addEventListener('touchmove', function(event) {
    if (event.scale !== 1) {
        event.preventDefault(); // Блокируем зум
    }
}, { passive: false });

В современных SPA-приложениях обработка событий на уровне document остается важным инструментом для реализации глобальной логики, обработки пользовательских взаимодействий и управления состоянием приложения. Правильное использование этих событий значительно улучшает UX и производительность веб-приложений.