removeEventListener example from Eloquent JavaScript

Question

In the following screenshot, can someone please explain why you have to pass the function "once" to button.removeEventListener("click", once)? Do we merely pass it because the removeEventListener method requires two arguments? Additionally, it seems strange that "Done" is not console logged more than once given the "once" function is also passed into the removeEventListener method.

 let button = document.getElementById("button"); function once() { console.log("Done"); button.removeEventListener("click", once); } button.addEventListener("click", once); 

 <button id="button">once</button> 

Answer 1

When you want to unbind only specific handler (like here you are unbinding once handler), you need to pass that as the second parameter, otherwise JS would not know which handler to remove.

There can be multiple handlers bound to each event.

Additionally, it seems strange that "Done" is not console logged more than once given the "once" function is also passed into the removeEventListener method.

That's the reason why it's called only once. You are passing a reference of function once there, so JS knows which handler to unbind. It does not call it when you call removeEventListener .

The function is called once user clicks the button, in the handler there is this console.log , and right after it will unregister itself so latter clicks will not fire that function anymore.

Answer 2

You can bind multiple events in javascript to an element on the same action.

When you want to remove a particular handler from the bound events you need to pass that handler function name in removeEventListener . If you do not pass the second argument in removeEventListener , it will simply remove all the handlers for that action on that event.

In your case, you are removing the handler once from within itself.

An example with different handlers to illustrate:

 function firstListener(e) { console.log('firstListener'); } function secondListener(e) { console.log('secondListener'); // this will remove `firstListener` handler from subsequent button clicks e.target.removeEventListener('click', firstListener); } // bind first event handler function document.querySelector('#btnMultiEvent').addEventListener('click', firstListener); // bind second event handler function document.querySelector('#btnMultiEvent').addEventListener('click', secondListener); 

 <button id="btnMultiEvent">Multiple Event Button</button> 

More on removeEventListener

Answer 3

Let me explain in an ascii code table:

               | script start | nothing happens | once() execute | nothing happens |
---------------|--------------|-----------------|----------------|-----------------|
"click" Events | once() added | once() waiting  | once() removed |                 |
               | lala() added | lala() waiting  | lala() waiting | lala() waiting  |

The function lala is the same as once and removes it self from the "click" Events.