Question

注意：找到了问题的原因，请在第一个答案中阅读评论。

我有一个下拉列表，在用户调用它之前一直隐藏。就像这样

<div>
    <button></button>
    <ul>
        <li></li>
        ....
        <li></li>
    </ul>
</div>

基本理念：

当用户按下上面代码中显示的按钮时，该列表变为可见。

我需要让列表能够通过键盘导航，
即如果用户在列表打开时按下或按下，则会选择相应的li（就好像鼠标悬停在它上面一样）

当列表变得可见时，应附加负责将此功能提供给列表的事件侦听器，并在列表再次隐藏时删除。

类似于Bitbucket为下拉列表所做的事情，但更简单。

问题：

我试图将一个事件监听器附加到ul然后在div元素上，当前者没有效果时，无效。
代码是这个

ON SHOW

this.<ul or div element here>.addEventListener('keydown', this.keyboardNavigation.bind(this));

隐藏

this.<ul or div element here>.removeEventListener('keydown', this.keyboardNavigation.bind(this));

并且回调就像这样

function keyboardNavigation(e) {
    console.log('foo');
}

注意：“this”是div和ul都是其属性的对象，回调函数实际上是该对象的一个方法。

问题1：
当我将它连接到ul本身或父div时，为什么keydown事件不起作用？

无论如何，由于这些不起作用，我决定将听众附在文件上 ON SHOW

document.addEventListener('keydown', this.keyboardNavigation.bind(this));

隐藏

document.removeEventListener('keydown', this.keyboardNavigation.bind(this));

相同的回调。

现在，虽然这有效，但我注意到事件监听器没有从文档中删除我后来注意到，另外一个keydown事件监听器我已经附加到另一个任务的文档，当该任务完成时也不会被删除，而它应该。

问题2：
为什么不删除事件侦听器？我无法理解我做错了什么，我正在删除与添加的事件完全相同的回调。

非常感谢任何帮助。

注意： 我尝试用jQuery的.on（）和.off（）代替，作为sugested here，虽然我不想使用jQuery，但同样的事情正在发生。

Answer 1

我的想法：

1是因为DIV或UL没有获得键盘事件，因为没有焦点？而文件总是得到冒泡的事件？

要对此进行测试，请单击DIV / UL并键入，然后查看是否触发了键盘事件。

我认为绑定到文档 - 如果您希望用户能够在单击后开始键入 - 这是正确的做法。

2这是因为你没有删除你创建的同一个处理程序吗？您应该保留对使用第一个绑定调用创建的处理程序的引用，并将此引用传递给remove调用 - 否则您将创建另一个（不同的）处理程序并要求删除它。

E.g：

var f = this.keyboardNavigation.bind(this);
document.addEventListener('keydown', f);
document.removeEventListener('keydown', f);