Что происходит при добавлении и удалении eventListener?

Event listeners (слушатели событий) — это функции, которые "слушают" определённые события (например, клик, наведение мыши, ввод с клавиатуры) на элементах DOM и выполняются при их возникновении. Механизм добавления и удаления является ключевым для интерактивности веб-страниц и управления ресурсами.

Добавление addEventListener

Метод addEventListener регистрирует переданную функцию-обработчик для события на целевом элементе. Вы можете добавить несколько обработчиков для одного и того же события на одном элементе. Обработчик получает объект события (Event), содержащий полезную информацию.

const button = document.getElementById('myButton');
function handleClick(event) {
    console.log('Кнопка нажата!', event.target);
}
// Добавляем слушатель
button.addEventListener('click', handleClick);

Удаление removeEventListener

Метод removeEventListener удаляет ранее зарегистрированный обработчик. Для успешного удаления необходимо передать те же самые аргументы: тип события и ссылку на ту же самую функцию. Анонимные функции удалить невозможно, поэтому рекомендуется использовать именованные функции.

// Удаляем слушатель
button.removeEventListener('click', handleClick);
// Теперь handleClick больше не будет вызываться при клике.

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

• Управление памятью: Если элемент удаляется из DOM, но слушатель на нём остаётся, функция и элемент могут не освобождаться сборщиком мусора (утечка памяти). Всегда удаляйте слушатели перед удалением элемента.
• Параметр options: В современном JavaScript addEventListener принимает третий параметр — объект options с настройками вроде { once: true } (выполнить обработчик только один раз) или { passive: true } (для улучшения производительности скролла).
• Фазы события: Третий параметр может быть булевым значением useCapture, определяющим, на какой фазе (захвата или всплытия) будет вызван обработчик.

Вывод: Используйте removeEventListener для очистки, когда обработчик события больше не нужен (например, при уничтожении компонента в SPA-фреймворке), чтобы обеспечить предсказуемость поведения приложения и избежать утечек памяти.