JavaScript如何移除已绑定的点击事件并在需要时重新绑定？

解决方案 #

方案1：提取事件引用实现绑定/解绑 #

你现在无法移除事件的核心原因是绑定用了匿名箭头函数，removeEventListener需要传入和绑定时完全一致的函数引用才能生效，所以先把清彩阶段的处理函数提取为可复用的具名函数：

// 统一存储清彩阶段各按钮的事件处理函数
const clearPhaseHandlers = {
  yellow: () => {
    disableAllButtons();
    buttons.greenButton.disabled = false;
    yellow = 0;
  },
  green: () => {
    disableAllButtons();
    buttons.brownButton.disabled = false;
    green = 0;
  },
  brown: () => {
    disableAllButtons();
    buttons.blueButton.disabled = false;
    brown = 0;
  },
  blue: () => {
    disableAllButtons();
    buttons.pinkButton.disabled = false;
    blue = 0;
  },
  pink: () => {
    disableAllButtons();
    buttons.blackButton.disabled = false;
    pink = 0;
  },
  black: () => {
    black = 0;
    checkWinner();
  }
}

修改allRedArePotted函数，绑定事件时使用上面定义的函数引用：

// 注意你原代码这里的函数写法有语法错误，已修正
function allRedArePotted() {
  disableAllButtons();
  buttons.yellowButton.disabled = false;
  buttons.yellowButton.addEventListener('click', clearPhaseHandlers.yellow);
  buttons.greenButton.addEventListener('click', clearPhaseHandlers.green);
  buttons.brownButton.addEventListener('click', clearPhaseHandlers.brown);
  buttons.blueButton.addEventListener('click', clearPhaseHandlers.blue);
  buttons.pinkButton.addEventListener('click', clearPhaseHandlers.pink);
  buttons.blackButton.addEventListener('click', clearPhaseHandlers.black);
}

新增事件移除函数，重启游戏时调用即可清除所有清彩阶段绑定的事件：

function removeClearPhaseEvents() {
  buttons.yellowButton.removeEventListener('click', clearPhaseHandlers.yellow);
  buttons.greenButton.removeEventListener('click', clearPhaseHandlers.green);
  buttons.brownButton.removeEventListener('click', clearPhaseHandlers.brown);
  buttons.blueButton.removeEventListener('click', clearPhaseHandlers.blue);
  buttons.pinkButton.removeEventListener('click', clearPhaseHandlers.pink);
  buttons.blackButton.removeEventListener('click', clearPhaseHandlers.black);
}

方案2：状态判断简化逻辑（更推荐） #

不需要反复绑定解绑事件，新增全局游戏状态变量区分阶段，所有逻辑都在初始绑定的事件里处理即可：

// 游戏阶段可选值：red=红球击打阶段、clear=清彩阶段
let gamePhase = 'red'

修改初始绑定的彩球点击事件，加入阶段判断：

buttons.yellowButton.addEventListener('click', () => {
  if (gamePhase === 'red') {
    coloredBall(2);
    return
  }
  // 清彩阶段逻辑
  disableAllButtons();
  buttons.greenButton.disabled = false;
  yellow = 0;
})
// 其余绿、棕、蓝、粉、黑按钮同理修改即可

allRedArePotted函数不需要再绑定新事件，仅修改状态和按钮状态即可：

function allRedArePotted() {
  gamePhase = 'clear'
  disableAllButtons()
  buttons.yellowButton.disabled = false
}

重启游戏时仅需要把gamePhase重置为red，再重置按钮和分数状态即可，无需处理事件绑定逻辑，出错概率更低。

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