求助：JS按钮集合绑定事件后，点击如何移除所有按钮的事件处理？

问题根源 #

你当前代码的问题出在：forEach循环里给每个按钮都单独创建了一个listen函数实例。点击某个按钮时，你在listen里调用removeEventListener传的是当前这个按钮对应的listen，但其他按钮绑定的是各自独立的listen函数，所以根本移除不掉它们的事件监听。

修正方案一：共享事件处理函数（推荐） #

把事件处理函数提到循环外面，让所有按钮共用同一个函数实例，这样就能统一移除所有按钮的监听：

// 定义所有按钮共用的事件处理函数
function handleButtonClick(e) {
  // 获取被点击的按钮
  const clickedBtn = e.target;
  // 执行你需要的操作：把按钮文本添加到container里
  const res = document.createElement('div');
  res.textContent = clickedBtn.textContent;
  document.getElementById('container').append(res);

  // 遍历所有按钮，移除高亮类和事件监听
  const allBtns = document.querySelectorAll('.string');
  allBtns.forEach(btn => {
    btn.classList.remove('bright');
    btn.removeEventListener('click', handleButtonClick);
  });
}

// 给所有按钮绑定事件
document.querySelectorAll('.string').forEach(btn => {
  btn.addEventListener('click', handleButtonClick);
});

修正方案二：存储函数引用统一移除 #

如果想保留原有的循环内逻辑，也可以把每个按钮的listen函数存起来，后续统一调用移除：

const listenerList = [];
document.querySelectorAll('.string').forEach((field, index, allFields) => {
  const listen = () => {
    const res = document.createElement('div');
    res.textContent = field.textContent;
    document.getElementById('container').append(res);

    allFields.forEach((btn, idx) => {
      btn.classList.remove('bright');
      btn.removeEventListener('click', listenerList[idx]);
    });
  };
  listenerList.push(listen);
  field.addEventListener('click', listen);
});

核心要点 #

removeEventListener能生效的前提是：传入的函数必须和addEventListener时绑定的是同一个函数实例，这也是你之前代码失效的核心原因。第一种方案更简洁，还能避免创建冗余的函数实例，优先推荐。

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