Question

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

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

下面，我调用包含方法removeEventhandlers()的{{1}}函数。但是该功能不起作用并且不会产生错误消息。有人可以帮我纠正这个问题吗？

removeEventListener()

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不可删除的原因。

在您的情况下（tic-tac-toe？），不是动态添加和删除事件侦听器，而是保持事件绑定并检查事件侦听器是否应该在内执行任何操作可能会更好。 >事件监听器。

另一种选择是跟踪绑定的事件侦听器功能，但这比较繁琐，在这里不值得。

（还有一个选择是将事件监听器放在父元素上，并使用事件冒泡和事件委托。）

我在使用“ removeEventListener（）”时遇到麻烦

2 个答案: