能否添加移除事件监听器按钮以移除元素上绑定的事件监听器？

先直接给你结论：按你现在的写法，那个移除按钮没法正常工作，而且removeEvent的放置位置也有讲究，我给你一步步拆解问题和修复方法：

一、为什么当前代码不能移除事件？ #

有三个核心问题：

1. 事件类型对不上：你给按钮绑定的是keypress事件，但移除的时候写的是click——移除事件必须和绑定的事件类型完全一致，不然浏览器找不到要移除的监听器。
2. 函数作用域隔离：respondToClick是写在forEach的回调函数里面的，每个按钮对应的respondToClick都是独立的函数实例，而且你的removeEvent根本访问不到这个函数，也拿不到要操作的element变量。
3. 元素引用未定义：removeEvent里的element没有任何定义，浏览器不知道你要移除哪个按钮的事件。

二、removeEvent该放哪儿？怎么修改才能用？ #

要解决这个问题，我们得先把每个按钮对应的监听器函数引用存起来，这样移除的时候才能精准找到它。具体操作如下：

1. 修改绑定事件的代码，保存监听器引用 #

我们在全局作用域（或者能被移除函数访问到的地方）用一个Map来存储每个按钮和对应的监听器：

// 全局作用域存按钮和监听器的映射，这样移除时能找到对应的函数
const buttonListenerMap = new Map();

// 绑定事件的代码调整
document.querySelectorAll("button").forEach((btn) => { 
  // 把respondToClick定义在这里，每个按钮对应一个实例
  function respondToClick() { 
    console.log("Key Pressed"); 
    console.log(btn); 
  }
  // 绑定keypress事件（注意和移除时的类型一致）
  btn.addEventListener("keypress", respondToClick); 
  // 把按钮和它的监听器存到Map里
  buttonListenerMap.set(btn, respondToClick);
}); 

2. 把removeEvent放在全局作用域 #

这样HTML里的按钮才能通过onclick调用到它。函数里可以选择移除所有按钮的事件，或者指定某一类：

// 全局作用域定义移除函数，确保HTML能访问到
const removeEvent = () => { 
  // 遍历所有存储的按钮，逐个移除keypress事件
  buttonListenerMap.forEach((listener, btn) => {
    btn.removeEventListener("keypress", listener);
    console.log(`已移除按钮「${btn.textContent}」的keypress事件`);
  });
  // 清空Map，避免重复移除
  buttonListenerMap.clear();
};

如果你只想移除特定按钮（比如带numbers类的），可以改成这样：

const removeEvent = () => { 
  document.querySelectorAll(".numbers").forEach(btn => {
    const listener = buttonListenerMap.get(btn);
    if (listener) {
      btn.removeEventListener("keypress", listener);
      buttonListenerMap.delete(btn);
      console.log(`已移除按钮「${btn.textContent}」的keypress事件`);
    }
  });
};

3. 调整HTML按钮代码 #

把末尾多余的分号去掉就行：

<button onclick="removeEvent();" class="numbers">RemoveEventListener</button>

几个关键要点记一下 #

• 移除事件必须满足两个条件：事件类型完全匹配，监听器是同一个函数引用（匿名函数没法移除，因为拿不到引用）。
• 作用域很关键：要让移除函数能访问到绑定的监听器和目标元素，提前把这些引用存在共同作用域里是最稳妥的办法。

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