Question

提前道歉，因为我已经进行了一些搜索，这似乎是一个相当普遍的问题，但是我发现的答案都不能完全满足我的需求。我能找到的最接近的是How do I add and remove an event listener using a function with parameters?，但是答案在那里涉及到JQuery，我正试图找到一种方法来仅用JS。

我正在使用匿名函数通过事件触发器传递参数，我认为这是正确的方法。如果temp是根据添加事件时的状态通过一些计算定义的，则我要添加侦听器，如下所示：

item.addEventListener("click", function(){myOnClickFunction(temp)});

但是，我希望能够在满足某些条件的情况下动态删除事件。

item.removeEventListener("click", function(){myOnClickFunction(temp)});

这是行不通的，因为内联函数是匿名的，因此无法引用它来匹配事件侦听器（温度可能仍然有所不同）。由于temp是在触发时计算的，因此我无法在匿名函数之外存储具有以下内容的引用：

var listener = function() {
  var temp = calculate(arg1, arg2, event);
  myFunction(temp);
};
window.addEventListener('click', listener, false);

以便我以后可以致电：

window.removeEventListener('click', listener, false);


myOnClickEvent(temp){
  //My code and calculations here
  document.removeEventListener("keypress", arguments.callee);
}

也不起作用，尽管我对该方法的工作方式不太自信。

如何动态删除此功能？在某些情况下，我也许可以重构代码，以便将需要传递的所有变量全局存储并不断重写，但这听起来像是凌乱的代码。另外，在某些情况下，触发事件是需要传递的参数之一，因此我认为我无法做到这一点。有什么想法吗？

Answer 1

您可以创建一个对象，其属性为temp值，并且其值myOnClickFunction绑定到该temp。例如：

const boundFns = {};
// acquire temp somehow
const boundFn = () => myOnClickFunction(temp);
boundFns[temp] = boundFn;
item.addEventListener("click", boundFn);

然后，当您需要删除侦听器时，检索适当的绑定函数：

item.removeEventListener("click", boundFns[temp]);

如果一个temp可能被多次使用，请首先检查boundFns中是否存在它：

const boundFns = {};
// acquire temp somehow
if (!boundFns[temp]) {
  boundFns[temp] = () => myOnClickFunction(temp);
}
const boundFn = boundFns[temp];
boundFns[temp] = boundFn;
item.addEventListener("click", boundFn);

如果temp不能可靠地用作唯一的对象键（例如，如果它是HTMLElement），则可以改用Map，它类似于对象，但是其键可以成为任何东西，而不仅仅是字符串：

const boundFns = new Map();
boundFns.set(temp, boundFn);
// ...
item.removeEventListener("click", boundFns.get(temp));

如何删除使用匿名函数传递参数的事件侦听器？

1 个答案: