Я не понимаю, почему в моем коде не работает метод RemoveEventListner(). Ниже приведен мой код с упрощенными именами и т.д.:
const form = document.querySelector(".formclass")
function executeUserInput(userInput){
function sayHello(event){
event.preventDefault()
console.info("Hello")
}
if (userInput === "add"){
form.addEventListener("submit", sayHello)
}else{
form.removeEventListener("submit", sayHello)
}
}
Когда я выполняю этот код и несколько раз запускаю условие1 и else-часть, прослушиватель событий добавляется каждый раз, когда я запускаю условие1, но метод удаленияEventListener не удаляет его. При проверке в инструментах Google Dev я также вижу, что прослушиватель отправки существует после выполнения else-части. Почему? Я нашел несколько вопросов по этой проблеме в stackoverflow, но ни один из них мне не помог.
Обновил код, чтобы более точно представить мой код, надеюсь, это прояснит ситуацию.
🤔 А знаете ли вы, что...
JavaScript активно развивается, и новые версии языка регулярно включают новые функции и улучшения.
Метод .removeEventListener() выполняет прямое сравнение между передаваемым ему объектом функции и всеми другими зарегистрированными объектами функции обработчика событий. Если передаваемая вами функция не является зарегистрированным обработчиком, она ничего не сделает.
В этом случае у вас есть функция, объявленная внутри этой внешней функции. Это означает, что каждый раз при вызове внешней функции создается новая версия внутреннего обработчика событий. Если один вызов внешней функции добавляет обработчик, а следующий вызов должен удалить обработчик, у него не будет ссылки на функцию-обработчик, созданную при предыдущем вызове.
Попробуйте переместить функцию-обработчик за пределы внешней функции (executeUserInput()).
Еще одна вещь, которая может возникнуть из-за этого: если вы вызываете внешнюю функцию 3 раза подряд и условие всегда равно true, вы получите 3 отдельных обработчика событий в форме.