Какие есть опции у addEventListener (capture, once, passive) и как они влияют на поведение обработчика?

1️⃣ Как кратко ответить

Метод addEventListener принимает три опции: capture, once и passive. Опция capture определяет, будет ли обработчик вызван на стадии захвата события. Опция once указывает, что обработчик должен быть вызван только один раз и затем удален. Опция passive сообщает браузеру, что обработчик не будет вызывать preventDefault, что может улучшить производительность при прокрутке.

2️⃣ Подробное объяснение темы

Метод addEventListener используется для добавления обработчиков событий к элементам в DOM. Он принимает три параметра: тип события, функцию-обработчик и объект с опциями. Эти опции позволяют более точно контролировать поведение обработчика событий.

Опция capture

Опция capture определяет, на какой стадии события будет вызван обработчик: на стадии захвата или на стадии всплытия. По умолчанию, события обрабатываются на стадии всплытия, но если capture установлено в true, обработчик будет вызван на стадии захвата.

document.getElementById('myElement').addEventListener('click', function(event) {
  console.log('Capture phase');
}, true); // true означает, что обработчик будет вызван на стадии захвата

• Стадия захвата: Событие идет сверху вниз по дереву DOM, начиная с корневого элемента.
• Стадия всплытия: Событие идет снизу вверх, начиная с целевого элемента.

Опция once

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

document.getElementById('myElement').addEventListener('click', function(event) {
  console.log('This will log only once');
}, { once: true });

• Преимущество: Удобно для событий, которые должны быть обработаны только один раз, например, при первом клике на кнопку.

Опция passive

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

document.addEventListener('scroll', function(event) {
  // Обработчик не вызывает preventDefault
}, { passive: true });

• Преимущество: Улучшает производительность, так как браузер может начать прокрутку сразу, не дожидаясь выполнения обработчика.

Пример использования всех опций

document.getElementById('myElement').addEventListener('click', function(event) {
  console.log('Event triggered');
}, {
  capture: true, // Обработчик будет вызван на стадии захвата
  once: true,    // Обработчик будет вызван только один раз
  passive: true  // Обработчик не будет вызывать preventDefault
});

• capture: true: Обработчик будет вызван на стадии захвата.
• once: true: Обработчик будет автоматически удален после первого вызова.
• passive: true: Обработчик не будет блокировать прокрутку, так как не вызывает preventDefault.

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