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

【问题标题】：Removing event listener when using inline anonymous function使用内联匿名函数时删除事件侦听器
【发布时间】：2017-05-10 18:18:00
【问题描述】：

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

那么，有什么替代解决方案呢？

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

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

【问题讨论】：

查看此解决方法以从 colorBox 中删除事件侦听器 - stackoverflow.com/questions/19469881/…
我试过了..，我猜它有一些缺点..，这使得它根本没有用。

标签： javascript html css callback event-listener

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

【讨论】：

感谢您的帮助。

【解决方案2】：

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

$( "p" ).off();

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

【讨论】：

【解决方案3】：

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

colorBox.outerHTML = colorBox.outerHTML;

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

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

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

【讨论】：