javascript - 使用内联匿名函数时删除事件监听器

Question

在一个简单的游戏应用程序中，我尝试向匿名事件回调函数传递一些参数。我只能使用匿名函数来做到这一点，因为它适合上下文(它的范围标识参数)。问题是游戏有重新启动的选项。重新启动后，它会向相同的节点添加新的事件监听器，您可能会猜到旧的事件监听器仍然存在，这会导致功能不正确和应用程序过载。我能想到的解决方案是在添加新事件监听器之前删除旧的事件监听器来“刷新”。但考虑到事件回调函数是匿名的，我找不到任何方法!

那么，替代解决方案是什么？

var adder = function(colorBox, num){
    colorBox.addEventListener('click', function(){
        eventCall(this, num);
    });
}

var eventCall = function(t, num){
        var clickedBox = t.style.backgroundColor;
....

Answer 1

您可以将该函数存储在某处，以便稍后在删除时引用它。 使用数组，您可以存储多个事件处理程序，而不会被对加法器函数的多次调用覆盖，然后使用一个函数来删除所有事件处理程序等，例如:

function eventCall(t, num) {
  var clickedBox = t.style.backgroundColor;
}

var fns = [];

function adder(colorBox, num) {
  function fn() {
    eventCall(this, num);
  }

  colorBox.addEventListener('click', fn);

  fns.push(fn);
}

function remover(colorBox) {
  fns.forEach(function(fn) {
    colorBox.removeEventListener('click', fn);
  });
}