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

【问题标题】：I am having trouble " using "removeEventListener()"我在使用“removeEventListener()”时遇到问题
【发布时间】：2020-02-26 07:33:27
【问题描述】：

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

    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));
  })
}

【问题讨论】：

要真正删除处理程序，您需要一个指向您首先添加的函数的指针。 .bind() 将围绕该函数创建一个新包装器，因此您尝试删除的不是您之前添加的包装器。旁注：也许看看委托事件 - 这只会将一个处理程序附加到某个容器，而不是单独添加处理程序。

标签： javascript removeeventlistener

【解决方案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);
    })
}

【讨论】：

【解决方案2】：

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

在您的情况下（井字游戏？），与其动态添加和删除事件侦听器，不如只保持事件绑定并检查事件侦听器是否应该在内做任何事情> 事件监听器。

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

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

【讨论】：