JavaScript中如何移除含嵌套箭头函数的带参事件监听器？

你没法直接移除当前形式的事件监听器，核心原因是函数引用不匹配：

• 调用testHandler("Hello world!")时，它会返回一个全新的箭头函数，这个返回的函数才是真正绑定到keydown事件上的处理函数。
• 而你执行document.removeEventListener("keydown", testHandler)时，传入的是testHandler本身，和实际绑定的内部箭头函数不是同一个引用，所以移除操作无效。而且每次调用testHandler()都会生成新的函数，哪怕参数相同，引用也不一样。

解决方法 #

方法一：保存返回的函数引用 #

这是最直接的方案，把testHandler返回的箭头函数存到变量里，添加和移除监听器都用这个变量：

const testHandler = (strToLog) => {
  return(e) => {
    if (e.key === "a") console.log(strToLog)
  }
}

// 保存绑定参数后的处理函数引用
const boundHandler = testHandler("Hello world!");
// 添加监听器
document.addEventListener("keydown", boundHandler);

// 移除时使用同一个引用
document.removeEventListener("keydown", boundHandler);

方法二：通过元素自定义属性传递参数 #

如果不想额外保存函数引用，可以把参数存到目标元素的dataset属性中，在处理函数里直接读取：

// 给document设置自定义属性存储参数
document.dataset.logContent = "Hello world!";

const testHandler = (e) => {
  if (e.key === "a") {
    // 从元素的dataset中获取参数
    console.log(e.currentTarget.dataset.logContent);
  }
}

document.addEventListener("keydown", testHandler);
// 直接用testHandler移除即可
document.removeEventListener("keydown", testHandler);

方法三：使用bind()绑定参数 #

bind()方法会创建一个绑定了指定参数的新函数，同样需要保存这个新函数的引用才能移除：

const testHandler = (strToLog, e) => {
  if (e.key === "a") console.log(strToLog);
}

// 绑定参数生成新函数，第一个参数为this指向（这里用null即可）
const boundHandler = testHandler.bind(null, "Hello world!");
document.addEventListener("keydown", boundHandler);

// 移除时使用绑定后的函数引用
document.removeEventListener("keydown", boundHandler);

关键注意点 #

• 无论用哪种方式，添加和移除监听器必须使用完全相同的函数引用，这是removeEventListener生效的核心要求。
• 如果你需要在处理函数中获取触发事件的元素，箭头函数可以通过e.currentTarget来获取，因为箭头函数没有自己的this指向。

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