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

Notice: The cause of the problem has been found, read comments on the first answer.

I have a dropdown list of some things, which are hidden until the user invites it. This is something like this

   Original idea:   
 The list appears when the button shown in the above code.  
 I need to be able to navigate through the keyboard from the list, i.e. if the user presses or presses while opening the list, then the appropriate li will be selected (like the mouse hovering over it  
 The list should be responsible for the listener giving this functionality in the list when the list appears and when the list is hidden again, it should be removed.  
 What is something that does the packet dropdown for the list, but easier than that?  
  issue:   
 I tried to add an event listener to ul and then on the div element, when the former did not have any effect, someone Not benefited 
 Code is  
 ON  
  THIS. & Lt; Ul or div element here & gt; .addEventListener ('keydown', this keyboard navigation. Stop (this));   
 at  
  this. & Lt; Ul or div element here & gt; .removeEventListener ('keydown', this .keyboardNavigation.bind (this));   
 and the callback is such  
  function keyboardNewigeration (e) {console.log ('foo'); }  Note:  "This" is an object in which div and ul are both properties, and the callback function is actually a way of that object.  
  Question 1:  
  Why is the keydrive event not working when I attach it to myself or the parent disk?   
 Anyway, because they were not working, I decided to attach the document to the listener. Show on 
  
  document.addEventListener ('keydown', this.keyboardNavigation .bind (this));   
 on  
  document.removeEventListener ('keydown', this .keyboardNavigation.bind (this));   
 The same callback.  
 Now, when it works, I see that the event listener is not removed from the document. 
 I later saw that the other important event was that the listener was attached to the document for any other work, that work would not be removed even when this work was done.  
  Question 2:  
  Why did the event listener not be removed? I can not understand what I am doing, I am removing the same callback in the same way as they were added.   
 Any help would be greatly appreciated.  
  Note:  I have tried to do it as a lot of luck, instead of jQuery .on () and .off (), though I use jQuery Do not want to do this, but it is still happening.   
 
 
 My thoughts:  
 1 This is because DIV or UL is not getting Is not the keyboard events because the focus is? While the document is always achieving the events of the bubble?  
 To test it, click on DIV / UL and type and see that keyboard events are triggered.  
 I think the document - if you want the user to be able to start typing just after clicking - it's the right thing to do.  
 2 Is this because you are not removing the same handler that you have created? You should maintain the reference of the handler that you created with the first bind call and it should pass this reference in the removal call - otherwise you are building another (separate) handler and asking to remove it.  
 Example:    var f = this.keyboardNavigation.bind (this); Document.addEventListener ('keydown', f); Document.removeEventListener ('keydown', f);