EventListeners - Javascript

Question

I'm currently trying to learn more about event listeners. Inside an IIFE, I have the following code:

function display(){
console.log('itemAdded');
}

document.querySelector('.add__btn').addEventListener('click',display);

document.addEventListener('keypress',function(event){

   if(event.which == 13 || event.keyCode == 13){ //if 'enter' is pressed
      display();
   }

});

What I'm trying to achieve is running the display function either by clicking the button with the right class or by hitting the enter key.

I pressed Enter, 'itemAdded' appears in console. I hit the button with the class .add__btn, 'itemAdded' appears again in console. Now when I click Enter again, it generates 2 'itemAdded' in the console.

I ran further tests, and found out that once I click the button with .add__btn class, the Enter key starts to generate 2 'itemAdded' texts:

console.log

'itemAdded' <- Generated by hitting Enter
'itemAdded' <- Generated by clicking
'itemAdded'
'itemAdded' <- 3rd and 4th were generated by a single hit of the enter button.

Can anyone help me understand why the Enter key generates 2 'itemAdded'?

Once the button is focused the enter key is the same as clicking it, so you're firing both event handlers. — Reinstate Monica Cellio, Apr 23 '18 at 10:48
You will have to unregister the handler. Every time you click or press button, same handler is registered to the same event and hence you are getting multiple alerts. — Pankaj Manali, Apr 23 '18 at 11:00
would you mind putting it into code? I'm having trouble with writing the code without any errors — Jp Arcilla, Apr 23 '18 at 11:45

EventListeners - Javascript

0 Answers0