Javascript addEventListener Callback logic

Question

I am following a Javascript video tutorial in which we are learning about event- listeners. We coded the following small web app that lets you input elements on a list:

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");

//Apparently if it is just one parameter it just gets transferred
function inputLength()
{
    return input.value.length;
}

//If there is just one parameter it gets transferred
function createListElement()
{
    var li = document.createListElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    input.value = "";
}

// Making sure that it does not add empty strings
function addListAfterClick()
{
    if(inputLength() > 0)
    {
        createListElement();
    }
}

//Making sure that it just adds after pressing enter
function addListAfterKeypress(event)
{
    if(inputLength() > 0 && event.keyCode === 13)
    {
        createListElement();
    }
}

button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);

I am confused on why the functions were called this way:

button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);

Instead of this way:

button.addEventListener("click", addListAfterClick());
input.addEventListener("keypress", addListAfterKeypress(event));

I know that it has something to do with callback functions. However, I am still unsure of how it just automatically gets the values of the parameters just like of art of magic.

Because then the function would be called immediately, rather than being passed as a callback. eg https://stackoverflow.com/questions/35667267/addeventlistenerclick-firing-immediately — CertainPerformance, Aug 19 '18 at 21:24

charanPreet · Answer 1 · 2020-02-17T16:33:31.343

The function is called like this because of the syntax rule of event listener which goes like this

element.addEventListener(event, function, useCapture);

whenever we are using an event listener you need to add function without () because by using () will make the function run before your event click happen which you don't want.

So right way is this:

button.addEventListener("click", addListAfterClick);

and

input.addEventListener("keypress", addListAfterKeypress(event));

is wrong because now function inside addListAfterKeypress don't need to access event it used above and only used whenever you need to tell the browser which key will activate this function by the help of keycode

So by not putting () at the end of the function name a reference is sent and the parameters are automatically sent somehow? — Tom Oconnor, Aug 19 '18 at 21:42

score 0 · Answer 2 · answered Aug 19 '18 at 21:27

When you add an event listener, you bind the specific event to a function. It's like saying to the browser "Hey, whenever a click event happens on the button element, remember to execute the addListAfterClick function". In order to do that, you just need to specify the name of the function that needs to be invoked when that event happens. If you add the () at the end of the function name, you will invoke it immediately (run it) instead of saving it as a reference (callback) to be called in the future.

I think you should go through [this introduction](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events) to get a better understanding of events. — kidA, Aug 19 '18 at 22:14

score 0 · Answer 3 · answered Aug 19 '18 at 21:44

0

javascript save it for later because that i how eventlistener inside JavaScript work if your write function inside eventlistener with () then it will execute as normal function do

answered Aug 19 '18 at 21:44

charanPreet

35
9

charanPreet · Answer 4 · 2020-02-17T16:35:00.303

0

Function addListAfterKeypress() have already done its work above you don't need to add

parameter inside eventlistener because it don't want parameters eventlistener is just executing the output from addListAfterKeypress()from above which is that is a enter key (because keycode is 13)

edited Feb 17 '20 at 16:35

answered Aug 19 '18 at 21:50

charanPreet

35
9

Javascript addEventListener Callback logic

4 Answers4