10

I am not able to understand how this addItem() and removeItem() is called without parenthesis in addEventListener('click', addItem).

var addButton = document.getElementById('add');
addButton.addEventListener('click', addItem);

var removeButton = document.getElementById('remove');
removeButton.addEventListener('click', removeItem);

function addItem(){
    console.log('Add Button clicked');
}

function removeItem(){
    console.log('Remove Button clicked');
}
Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
Mercury1337
  • 333
  • 4
  • 13
  • That's a reference to the function. If you do `var anotherAddItem = addItem;` then you can execute `anotherAddItem()` in the same way. – Reinstate Monica Cellio Jun 03 '19 at 08:42
  • Possible duplicate of [JavaScript addEventListener function syntax](https://stackoverflow.com/questions/34933573/javascript-addeventlistener-function-syntax) – Joshua T Jun 03 '19 at 08:45
  • Does this answer your question? [addEventListener calls the function without me even asking it to](https://stackoverflow.com/questions/16310423/addeventlistener-calls-the-function-without-me-even-asking-it-to) – ggorlen Feb 16 '21 at 20:41

6 Answers6

6

Because in this context, addItem is used as a function reference rather than the return value of the function.

If you did this:

addButton.addEventListener('click', addItem());

Then addItem would be executed straight away, and whenever addButton was clicked, the return value of addItem (which is undefined) would be called. This would result in an error, because undefined is not a function.

Here, you're saying when I click addButton, lookup the function reference I passed, and execute it.

You can also write this two different ways:

addButton.addEventListener('click', "addItem()");
addButton.addEventListener('click', function() {
    addItem();
});

Both of the above will still result in the same output as your original code.

Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
2

This is because you are passing the function as an argument/parameter to the addEventListener() method. If you add the parathesis, the function would execute straight away and that is not what you want. You're telling the addEventListener() which function to execute when the event is fired.

Hope this helps.

Ryan
  • 393
  • 7
  • 22
0

Without parentheses you're not actually calling the function. A function name without the parentheses is a reference to the function.

ggorlen
  • 44,755
  • 7
  • 76
  • 106
Shovan
  • 136
  • 1
  • 13
0

This is core js functionality. You can read about this here.

Functions are function objects. In JavaScript, anything that is not a primitive type ( undefined , null , boolean , number , or string ) is an object. Objects in JavaScript are extremely versatile. Because of this, we can even pass a function as a parameter into another function

dganenco
  • 1,596
  • 1
  • 5
  • 16
0

You are attaching an event listener and it will call the function If you add the parentesis inside the callback you will recive error because you exec the call

gigiLaTrottola
  • 97
  • 1
  • 9
0

The second argument is the addEventlistener method function. You can define the function in global, without add parentheses in the second argument addEventlistener.

Muhammad Ali Malekzadeh
  • 150
  • 1
  • 7