RemoveEventListener 不起作用答案

【问题标题】：RemoveEventListener doesn't workRemoveEventListener 不起作用
【发布时间】：2018-03-24 01:32:19
【问题描述】：

我遇到了一个非常奇怪的情况，阻止我删除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);
}

结果是一样的。

【问题讨论】：

它在你的小提琴上正常工作
不是，控制台中的 cmets 很好，但是监听器仍然存在（请参考 Chrome Inspector 中的Event Listeners 标签）。

标签： javascript ecmascript-6

【解决方案1】：

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

试试这个代码Codepen。

【讨论】：

我明白了。所以我应该将keyboardFunction 作为参数传递给keyboardEvents？
我尝试在外面定义它，但这不起作用（见更新的小提琴）。
@TomekBuszewski 我在想。您需要每次都有相同的参考。
但是请注意，为什么你在每个keyup 上附加新的事件监听器？
这是非常短暂的绑定，因此创建更大的侦听器并保留它是没有意义的。