Passive-обработчики: наблюдение за событием без отмены действия

Назначение

Параметр passive сообщает браузеру, что обработчик не будет отменять действие события через preventDefault. Это особенно важно для некоторых событий ввода, связанных с прокруткой.

Как это работает

В пассивном обработчике вызов preventDefault не отменит действие и может вызвать предупреждение. Режим следует выбирать явно там, где поведение зависит от возможности отмены, а не полагаться на одинаковые значения по умолчанию во всех контекстах.

Пример

const area = document.querySelector("#scroll-demo");
function observeWheel(event) {
  console.log("Учебное направление:", Math.sign(event.deltaY));
}
if (area) {
  area.addEventListener("wheel", observeWheel, {passive: true});
  // После упражнения:
  // area.removeEventListener("wheel", observeWheel);
}

Что должно получиться

На своей странице с областью scroll-demo обработчик наблюдает за wheel и не блокирует действие браузера. Пример не создаёт собственный механизм прокрутки.

Граница применения и частая ошибка

Passive не делает тяжёлый код быстрым. Частые записи в консоль сами могут мешать измерению. Не назначайте passive:true обработчику, которому действительно требуется отменить действие; сначала пересмотрите необходимость перехвата.

Самостоятельная проверка

Проверьте обычную прокрутку своей тестовой области с наблюдателем и без него. Уберите журналирование перед измерением производительности. Затем объясните, почему неотменяемое событие scroll и входное событие wheel решают разные задачи.

Связанные материалы

• HTTP-статусы
• Журналы сервера
• Проверка запросов