Как removeEventListener определяет, какой именно обработчик нужно удалить?

Метод removeEventListener не ищет обработчик «по имени» или по телу функции. Он сравнивает параметры вызова с теми, что были переданы в addEventListener: тип события, ссылку на функцию-обработчик и флаг capture. Совпадение должно быть точным, иначе браузер просто ничего не удалит и не выбросит ошибку.

Что именно сравнивается

• type — строка события, например "click".
• listener — та же самая ссылка на функцию, а не её копия.
• options.capture — булево значение фазы перехвата (по умолчанию false).

Ключевой момент — ссылочное равенство функций. Две функции с одинаковым кодом, но созданные отдельно, считаются разными объектами.

function onClick() {
  console.log('clicked');
}

// Работает: одна и та же ссылка
btn.addEventListener('click', onClick);
btn.removeEventListener('click', onClick);

// Не работает: разные ссылки
btn.addEventListener('click', () => console.log('a'));
btn.removeEventListener('click', () => console.log('a'));

Почему анонимные функции не удаляются

Каждый вызов () => {} создаёт новый объект функции. Даже если код идентичен, это уже другая ссылка, поэтому removeEventListener не находит совпадения. Решение — сохранить функцию в переменной или в свойстве объекта.

const handler = () => console.log('clicked');
btn.addEventListener('click', handler);
btn.removeEventListener('click', handler);

Опция capture

Если обработчик добавлен с { capture: true }, удалять его нужно с тем же значением. Иначе браузер считает это другим слушателем.

btn.addEventListener('click', handler, { capture: true });
btn.removeEventListener('click', handler, { capture: true });

Итог: removeEventListener сопоставляет слушателей по типу события, ссылке на функцию и флагу capture. Чтобы удаление работало, храните ссылку на обработчик и передавайте те же параметры, что и при добавлении.