使用具有局部范围变量的匿名函数删除事件侦听器

Question

removeEventListener 在这里不起作用，因为这些函数引用的是匿名函数：

const startSelectNode = (stepIndex) => {
  document.addEventListener("click", (e) => onClick(e, stepIndex), true);
};

const stopSelectNode = (stepIndex) => {
  document.removeEventListener("click", (e) => onClick(e, stepIndex), true);
};

但我不能在这里命名该函数，因为它需要 stepIndex，这是一个局部变量。我怎样才能使这项工作？

Answer 1

你绝对可以命名函数，你只需要在函数的范围之外命名，就像这样：

function onStepIndex(e, stepIndex) {
 // your action here
}

const startSelectNode = (stepIndex) => {
  document.addEventListener("click", onStepIndex(e, stepIndex), true);
};

const stopSelectNode = (stepIndex) => {
  document.removeEventListener("click", onStepIndex(e, stepIndex), true);
};

Answer 2

Yair Cohen 的回答思路正确，但缺少一些内容。 addEventListener 需要函数引用而不是函数调用。在他的代码中，onStepIndex 将被执行一次，然后再也不会执行。

要创建函数引用和能够为其提供参数和能够稍后删除事件侦听器，您可以使用这个概念叫做 currying.

const onStepIndex = function(stepIndex) {
    return function actualOnStepIndex(event) {
        console.log(event);
        console.log(stepIndex);
    }
}
const handlers = [];

const startSelectNode = (stepIndex) => {
  document.addEventListener("click", handlers[stepIndex] = onStepIndex(stepIndex), true);
};

const stopSelectNode = (stepIndex) => {
  document.removeEventListener("click", handlers[stepIndex], true);
};

startSelectNode(1); // This adds the event listener  for stepIndex = 1
stopSelectNode(1); // This removes the event listener for stepIndex = 1

基本上，通过调用 onStepIndex 您 return 实际函数，现在是事件处理程序。我们将对函数的引用保存在 handlers 数组中，如果我们稍后要调用 removeEventListener.

则需要该引用

使用具有局部范围变量的匿名函数删除事件侦听器

Remove event listener with an anonymous function with a local scope variable

javascript

dom-events