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.

Answer 1

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

Answer 2

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.

Answer 3

javascript 将其保存以备后用，因为如果您在 eventlistener 中使用()写入函数，那么它会像正常函数一样执行 JavaScript 中的事件侦听器如何工作

Answer 4

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)