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');
}

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');
}

• javascript
• html
• function

• 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 Commented Jun 3, 2019 at 8:42
• Possible duplicate of JavaScript addEventListener function syntax – Joshua T Commented Jun 3, 2019 at 8:45
• Does this answer your question? addEventListener calls the function without me even asking it to – ggorlen Commented Feb 16, 2021 at 20:41

6 Answers 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.

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.

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

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

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

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