JS for循环绑定的事件监听器无法移除问题解决方案

• 核心问题出在bind()方法的特性上：每调用一次.bind()，都会返回一个完全独立的新函数引用。你绑定事件时传的是当时bind生成的函数，到移除事件时又重新调用了一次bind，生成的是另一个新函数，两个函数内存地址完全不一样，浏览器识别不到这是你之前绑定的那个监听器，当然移除不了。
• 额外提一句：你给click事件加了{once: true}配置，这个配置本身就会让click事件在触发一次后自动销毁，根本不需要手动移除，你写的手动移除click的代码因为上面说的引用问题，从始至终都没生效过。

只需要在绑定事件的时候，把每个按钮对应生成的绑定后函数存下来，移除的时候直接拿存好的原函数引用去匹配就行，不需要写重复逻辑，修改后的完整代码如下：

// 存每个按钮对应的事件处理函数引用
const listenerMap = [];

function roleDescription() {
  // 第二阶段：悬停显示角色描述，点击选定角色
  for (let i = 0; i < originDescription.length; i++) {
    // 提前生成绑定好上下文和参数的处理函数，存入映射表
    const hoverHandler = asignDesc.bind(buttons[i], i);
    const clickHandler = asignRole.bind(buttons[i], i);
    listenerMap[i] = { hoverHandler, clickHandler };

    buttons[i].addEventListener('mouseover', hoverHandler);
    buttons[i].addEventListener('click', clickHandler, { once: true });
  }
}

function asignRole(i) {
  playerrole = role[i];
  alert(playerrole);
  makeSpecial();
}

function asignDesc(i) {
  maintext.textContent = originDescription[i];
  maintext.style.fontSize = '15px';
}

function makeSpecial() {
  // 第三阶段：清除所有按钮事件，进入下一流程
  for (let i = 0; i < originDescription.length; i++) {
    // 用之前存的原函数引用移除，完全匹配
    buttons[i].removeEventListener('mouseover', listenerMap[i].hoverHandler);
    // click事件因为配置了once，触发后已经自动移除，无需额外处理
  }
  // 这里直接写下一阶段的业务逻辑即可
}

可选优化：如果不想额外维护映射表，也可以在玩家选定角色后直接给所有按钮设置disabled属性，或者用一个全局状态标记拦截后续事件触发，性能比逐个移除监听器更好，适合按钮数量多的场景。如果要求必须彻底清除监听器，上面存引用的写法是最规范的。

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