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

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

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