removeEventListener无法生效求助：为何无法移除表单submit事件监听？

问题核心在于每次调用executeUserInput时，都会生成一个全新的sayHello函数实例。

当触发add分支时，addEventListener绑定的是本次调用生成的sayHello函数；而执行else分支移除事件时，又会创建另一个新的sayHello——这两个函数代码完全一致，但在JavaScript中是独立的引用对象，removeEventListener找不到之前绑定的那个函数，自然无法完成移除操作。

打个比方：你给门装了一把新锁（第一次的sayHello），后来拿另一把外观相同的新锁（第二次的sayHello）去拆原来的锁，肯定拆不掉。

解决方法 #

要让removeEventListener生效，必须保证绑定和移除时使用同一个函数引用，以下是两种常用实现方式：

1. 将回调函数移到外部作用域

把sayHello定义在executeUserInput外面，确保每次调用都复用同一个函数引用：

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

// 固定的函数引用，所有调用共享
function sayHello(event){
  event.preventDefault()
  console.log("Hello")
}

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

2. 用外部变量保存函数引用

如果必须在executeUserInput内部定义函数，可以用外部变量缓存引用，避免重复创建新实例：

const form = document.querySelector(".formclass")
let helloHandler = null // 缓存函数引用的变量

function executeUserInput(userInput){
  // 仅在第一次调用时创建函数，后续复用同一引用
  if(!helloHandler){
    helloHandler = function(event){
      event.preventDefault()
      console.log("Hello")
    }
  }

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

关键知识点 #

removeEventListener生效的三个必要条件：

• 事件类型完全匹配（比如都是"submit"）
• 回调函数为同一个引用（不是代码相同的不同函数）
• 绑定和移除时的事件捕获/冒泡模式一致（默认是冒泡模式，无需额外设置）

内容的提问来源于stack exchange，提问作者Tomsho