RemoveEventListener不起作用

Question

我有一个非常奇怪的例子，阻止我移除eventListener。这是一个非常简单的函数，它绑定到键盘事件，并在不需要时解除绑定(理论上)。

守则如下：

const keyboardEvents = function(input, remove = false) {
    const { key, func } = input;
    const operation = remove ? 'removeEventListener' : 'addEventListener';

    function keyboardFunction(event) {
        console.log(event);

        if (event.keyCode === key) {
            func();
        }
    }

    window[operation]('keyup', keyboardFunction);

  if (remove) {
    console.log('REMOVED');
  } else {
    console.log('ADDED');
  }
};

我用的是

keyboardEvents({ key: 27, func: testFunc }); // add event
keyboardEvents({ key: 27, func: testFunc }, true); // remove event

问题是，侦听器没有被移除。我能做什么?

CodePen供参考：https://codepen.io/tomekbuszewski/pen/LzBZgP?editors=0010

我也试过不使用operation，只是写

if (remove) {
  window.removeEventListener('keyup', keyboardFunction);
} else {
  window.addEventListener('keyup', keyboardFunction);
}

结果是一样的。

Answer 1

您需要为从事件处理程序中移除提供相同的函数引用。每次调用keyboardEvents时，都会创建一个名为keyboardFunction的新函数，因此与要调用的调用不同。所以你为什么不能把它移除。

试试下面的代码Codepen。