Как удалить обработчик события (event listener)?

Для удаления обработчика события используется метод removeEventListener(). Этот метод принимает те же три аргумента, что и addEventListener():

1. Тип события (строка, например 'click', 'mouseover').
2. Ссылка на функцию-обработчик, которая была назначена.
3. Опциональный объект или булево значение, указывающее фазу (захват или всплытие). Должен совпадать с тем, что использовался при добавлении.

Важно: для успешного удаления необходимо передать именно ту же ссылку на функцию, которая использовалась при добавлении. Анонимные функции, созданные "на лету", удалить таким образом невозможно.

Пример:

// Получаем элемент
const element = document.getElementById('myButton');

// Определяем функцию-обработчик
function handleClick() {
  console.log('Кнопка нажата!');
}

// Добавляем обработчик
element.addEventListener('click', handleClick);

// ...некий код...

// Удаляем обработчик
element.removeEventListener('click', handleClick);

Если обработчик добавлялся с опциями, например useCapture: true, то при удалении их также нужно указать:

element.addEventListener('click', handleClick, { capture: true });

// ...

element.removeEventListener('click', handleClick, { capture: true });

Если при добавлении третий аргумент был опущен (использовалось значение по умолчанию false), то при удалении его также можно опустить или использовать false:

element.addEventListener('click', handleClick); // useCapture: false по умолчанию

// ...

element.removeEventListener('click', handleClick);
element.removeEventListener('click', handleClick, false); // эквивалентно верхнему