我在使用“removeEventListener()”时遇到问题

Question

这是创建点击处理程序的原始语句。

    const cells = document.querySelectorAll(".cell")
    cells.forEach(function(cell) {
      cell.addEventListener('click', onCellClicked.bind(this, cell.id));
    }) 

下面我调用包含removeEventListener()方法的removeEventhandlers()函数。 此功能如何不起作用并且不会产生错误消息。 有人可以帮我解决这个问题吗？

if (checkForWin(oSelectionArray) === true) {
    insertWinOrLossImage('ticTacToeAssets/Assets/you win image.png', 'youWin', 'playerScore', wonOrLost = winOrLooseObj.won)
    removeEventHandlers()
  } else if (checkForWin(xSelectionArray) === true) {
    insertWinOrLossImage('ticTacToeAssets/Assets/you loose image.png', 'youLoose', 'CPUscore', wonOrLost = winOrLooseObj.lost)
    removeEventHandlers()
  } else if (oSelectionArray.length === 5) {
      insertWinOrLossImage('ticTacToeAssets/Assets/noWinner.png', 'draw', 'drawScore', wonOrLost = winOrLooseObj.draw)
      removeEventHandlers()
     }
   }

function removeEventHandlers() {
  const cellsToRemoveEventhandlers = document.querySelectorAll(".cell")
  cellsToRemoveEventhandlers.forEach(function(cell) {
    cell.removeEventListener('click', onCellClicked.bind(window));
  })
}

Answer 1

您需要跟踪实际的侦听器，因为.bind创建了一个新的函数引用。

像这样的东西：

let listeners = {};
const cells = document.querySelectorAll(".cell")
cells.forEach(function(cell) {
  const listener = onCellClicked.bind(this, cell.id)
  listeners[cell.id] = listener;
  cell.addEventListener('click', listener);
}) 

function removeEventHandlers() {
    const cellsToRemoveEventhandlers = document.querySelectorAll(".cell")
    cellsToRemoveEventhandlers.forEach(function(cell) {
        const listener = listeners[cell.id];
        cell.removeEventListener('click', listener);
    })
}

Answer 2

每次调用onCellClicked.bind ，都会得到一个新绑定的onCellClicked ，这与之前的任何绑定都不同。 这就是removeEventListener没有什么可删除的原因。

而是动态地添加和删除事件侦听器，你的情况（井字棋？）的它可能会更好地只保留事件的约束和检查事件侦听器是否应该做的事件侦听器内的任何东西。

另一种选择是跟踪绑定的事件侦听器函数，但这更乏味，不值得花时间在这里。

（另一种选择是在父元素上设置事件侦听器并使用事件冒泡和事件委托。）