使用内联匿名函数时删除事件侦听器

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

Answer 2

您可以使用off函数（ http://api.jquery.com/off/ ）通过jQuery删除事件处理程序。 例如

$( "p" ).off();

从所有段落中删除所有事件处理程序。 因此，如果您将所有dom元素分类为一个特定的类，则仍然可能。

Answer 3

您可以使用outerHTML属性删除元素上的所有事件侦听器。

colorBox.outerHTML = colorBox.outerHTML;

将outerHTML属性设置为其自身将删除所有附加的事件侦听器，并允许您从要附加的任何新侦听器重新开始。

可以在这里找到有关此方法的更多信息：

https://stackoverflow.com/a/32809957/5463636