调用removeEventListener不起作用

Question

我不明白为什么removeEventListner()在我的代码中不起作用。 下面是我的代码，带有简化的名称等：

const form = document.querySelector(".formclass")

function executeUserInput(userInput){
  function sayHello(event){
    event.preventDefault()
    console.log("Hello")
  }

  if(userInput === "add"){
    form.addEventListener("submit", sayHello)
  }else{
    form.removeEventListener("submit", sayHello)
  }
}

当我执行此代码并多次触发条件1和else部分时，每次触发条件1时都会添加一个事件监听器，但removeEventListener不会删除它。在谷歌开发工具中检查时，我还可以看到执行 else-part 之后存在提交侦听器。 为什么？ 我确实在 stackoverflow 上找到了一些关于这个问题的问题，但没有一个对我有帮助

更新了代码以更准确地表示我的代码，希望这能澄清

Answer 1

.removeEventListener()

方法会直接比较您传递给它的函数对象和所有其他注册的事件处理函数对象。如果您传递的函数不是已注册的处理程序，那么它不会执行任何操作。

在这种情况下，您在该外部函数内声明了一个函数。这意味着每次调用外部函数时，都会创建内部事件处理程序的“new”版本。如果对外部函数的一次调用添加了一个处理程序，如果下一次调用应该删除该处理程序，则它将不会引用上一次调用中创建的处理程序函数。 尝试将处理函数移至外部函数之外 (

executeUserInput()

)。