Я не понимаю, почему в моем коде не работает метод 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, но ни один из них мне не помог.
Обновил код, чтобы более точно представить мой код, надеюсь, это прояснит ситуацию.
Надеюсь, мое редактирование проясняет ситуацию, на самом деле это было недоразумение, как и раньше, извините за это
Да, это, конечно, так!
Метод .removeEventListener()
выполняет прямое сравнение между передаваемым ему объектом функции и всеми другими зарегистрированными объектами функции обработчика событий. Если передаваемая вами функция не является зарегистрированным обработчиком, она ничего не сделает.
В этом случае у вас есть функция, объявленная внутри этой внешней функции. Это означает, что каждый раз при вызове внешней функции создается новая версия внутреннего обработчика событий. Если один вызов внешней функции добавляет обработчик, а следующий вызов должен удалить обработчик, у него не будет ссылки на функцию-обработчик, созданную при предыдущем вызове.
Попробуйте переместить функцию-обработчик за пределы внешней функции (executeUserInput()
).
Еще одна вещь, которая может возникнуть из-за этого: если вы вызываете внешнюю функцию 3 раза подряд и условие всегда равно true
, вы получите 3 отдельных обработчика событий в форме.
Вау, это абсолютно логично!! Чувствую себя очень плохо, сидя перед компьютером 2-3 часа и ничего не узнавая. Уже перенес функцию наружу и она работает нормально, большое спасибо!! Последнее, что вы упомянули, на самом деле является желаемым поведением, но спасибо, что указали и на это!
Ваш оператор
if
выполняется только один раз, сразу после инициализации переменнойform
. Если в этот момент «условие1» истинно, будет добавлен обработчик событий. Этот операторif
(если опубликованный вами код верен, а это явно не так) никогда больше не запустится. Размещая код в вопросе, убедитесь, что он точно отражает реальную ситуацию, о которой вы спрашиваете.