Проблема с document.removeEventListener ()

Question

У меня есть функция, которая создает прослушиватель событий:

document.addEventListener(name, handler.bind(null, name, callback), false);

Я использую .bind для передачи дополнительных параметров, но когда я пытаюсь удалить его:

document.removeEventListener(name, handler, false);
// or
document.removeEventListener(name, handler.bind(null), false);

Это не фактически удаляется.Я пробовал различные исправления и не могу заставить его работать.

Answer 1

Вам нужно сохранить ссылку на связанную функцию, чтобы позже можно было вызывать removeEventListener с ней:

const boundHandler = handler.bind(null, name, callback);
document.addEventListener(name, boundHandler, false);

// later:

document.removeEventListener(name, boundHandler, false);

Answer 2

Метод EventTarget.removeEventListener() удаляет из EventTarget прослушиватель событий, ранее зарегистрированный в EventTarget.addEventListener (). Прослушиватель событий, который необходимо удалить, идентифицируется с использованием комбинации типа события, самой функции прослушивателя событий и различных необязательных параметров, которые могут повлиять на процесс сопоставления.

Поскольку вы используете Function#bind, метод bind() создает новую функцию , для которой при вызове для этого ключевого слова установлено заданное значение с заданным значением последовательность аргументов, предшествующих любым, указанным при вызове новой функции.

Следовательно, при использовании removeEventListener вы не передаете ту же ссылку функции, которая была добавлена ​​для addEventListener.

Кэшировали Handler function в переменной, которую можно использовать как для addEventListener, так и для removeEventListener

let handlerFunction = handler.bind(null, name, callback);
document.addEventListener(name, handlerFunction, false);
document.removeEventListener(name, handlerFunction, false);