如何移除使用箭头函数绑定的JavaScript事件监听器？

你当前代码里用的是匿名箭头函数作为事件回调，而removeEventListener要求必须传入和添加监听时完全一致的函数引用才能生效——匿名函数每次创建都是全新的引用，自然没法直接移除。下面给你两种可行的解决办法：

方案1：提取函数为具名引用 #

把回调函数单独定义，保存好引用，这样移除时就能精准匹配：

// 先定义可复用的回调函数
const handleElementClick = (ev) => {
  console.log("this is where I would remove the event listener");
  // 在这里直接移除监听
  element.removeEventListener("click", handleElementClick);
};

let element = document.getElementById("element");
element.addEventListener("click", handleElementClick);

方案2：使用AbortController（现代浏览器支持） #

如果不想额外维护函数引用，可以用AbortController的信号来控制监听的生命周期，适合一次性监听或批量移除的场景：

let element = document.getElementById("element");
const controller = new AbortController();

element.addEventListener("click", (ev) => {
  console.log("this is where I would remove the event listener");
  // 通过中止信号触发移除
  controller.abort();
}, { signal: controller.signal });

两种方案各有适用场景：方案1兼容性最好，能覆盖所有浏览器；方案2是ES6+的新特性，代码更简洁，不需要额外管理函数引用，适合现代前端项目。

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