Keydown event not removed from document and not registering on div element

Question

NOTICE: The cause of the problem has been found, read the comments to the first answer.

I have a dropdown list of things, that is hidden until the user invokes it. It's something like this:

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

The basic idea:

The list becomes visible when the user presses the button shown in the code above.

I need to make the list able to be navigated by keyboard,
i.e. if the user presses up or down while the list is open, the appropriate li will be selected (as if the mouse was hovering over it instead)

The event listener responsible for giving this functionality to the list should be attached when the list becomes visible and be removed when the list becomes hidden again.

Something like what Bitbucket does for the dropdown lists, but even simpler.

The issue:

I tried to attach an event listener to the ul and then on the div element, when the former had no effect, to no avail.
The code is this

ON SHOW

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

ON HIDE

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

and the callback is like so

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

NOTE: "this" is an object to which the div and the ul are both properties of, and the callback function is actually a method of that object.

QUESTION 1:
Why is the keydown event not working when I attach it to either the ul itself or the parent div?

Anyway, since these did not work, I decided to attach the listener to the document.
ON SHOW

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

ON HIDE

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

Same callback.

Now, while this works, I noticed that the event listener is not removed from the document.
I later noticed that another keydown event listener I had attached to the document for another task, is also not removed when that task is done, while it should.

QUESTION 2:
Why are the event listeners not removed? I cannot understand what I am doing wrong, I am removing the exact same callback on the exact same event as were those that were added.

Any help will be much appreciated.

NOTE: I have tried doing it with jQuery's .on() and .off() instead, as suggested here, although I do not want to use jQuery, yet same thing is happening.

Answer 1

My thoughts:

1 Is it because the DIV or UL isn't getting the keyboard events because the don't have focus? Whereas the document is always getting the bubbled events?

To test this, click in the DIV/UL and type and see if the keyboard events get triggered then.

I think binding to the document - if you want the user to be able to just start typing after clicking - is the right thing to do here.

2 Is this because you are not removing the same handler you created? You should retain a reference to the handler you create with the first bind call and pass this reference in to the remove call - otherwise you're creating another (different) handler and asking to remove that.

E.g.:

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