Вызов RemoveEventListener не работает

Я не понимаю, почему в моем коде не работает метод 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, но ни один из них мне не помог.

Обновил код, чтобы более точно представить мой код, надеюсь, это прояснит ситуацию.

Ваш оператор if выполняется только один раз, сразу после инициализации переменной form. Если в этот момент «условие1» истинно, будет добавлен обработчик событий. Этот оператор if (если опубликованный вами код верен, а это явно не так) никогда больше не запустится. Размещая код в вопросе, убедитесь, что он точно отражает реальную ситуацию, о которой вы спрашиваете.

Pointy 10.04.2024 19:22

Надеюсь, мое редактирование проясняет ситуацию, на самом деле это было недоразумение, как и раньше, извините за это

Tomsho 10.04.2024 19:28

Да, это, конечно, так!

Pointy 10.04.2024 19:31
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Метод .removeEventListener() выполняет прямое сравнение между передаваемым ему объектом функции и всеми другими зарегистрированными объектами функции обработчика событий. Если передаваемая вами функция не является зарегистрированным обработчиком, она ничего не сделает.

В этом случае у вас есть функция, объявленная внутри этой внешней функции. Это означает, что каждый раз при вызове внешней функции создается новая версия внутреннего обработчика событий. Если один вызов внешней функции добавляет обработчик, а следующий вызов должен удалить обработчик, у него не будет ссылки на функцию-обработчик, созданную при предыдущем вызове.

Попробуйте переместить функцию-обработчик за пределы внешней функции (executeUserInput()).

Еще одна вещь, которая может возникнуть из-за этого: если вы вызываете внешнюю функцию 3 раза подряд и условие всегда равно true, вы получите 3 отдельных обработчика событий в форме.

Вау, это абсолютно логично!! Чувствую себя очень плохо, сидя перед компьютером 2-3 часа и ничего не узнавая. Уже перенес функцию наружу и она работает нормально, большое спасибо!! Последнее, что вы упомянули, на самом деле является желаемым поведением, но спасибо, что указали и на это!

Tomsho 10.04.2024 19:50

Другие вопросы по теме