Javascript addEventListener回调逻辑

下面是一个Javascript视频教程，我们在其中学习事件侦听器。我们编写了以下小型web应用程序，允许您在列表中输入元素：

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

我不明白为什么要这样调用函数：

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

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

而不是这样：

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

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

---

我知道这与回调函数有关。但是，我仍然不确定它是如何像魔法艺术一样自动获取参数值的。

当您添加事件侦听器时，您将特定事件绑定到函数。这就像对浏览器说“嘿，每当button元素上发生click事件时，记得执行

addListAfterClick

函数”。为了做到这一点，您只需要指定事件发生时需要调用的函数的名称。如果在函数名的末尾添加

（）

，您将立即调用它（运行它），而不是将其保存为引用（回调）以供将来调用。

函数是这样调用的，因为事件侦听器的语法规则是这样的

element.addEventListener(event, function, useCapture);

无论何时使用事件侦听器，您都需要添加不带

（）

的函数，因为使用

（）

将使函数在您不希望的事件发生之前运行

所以正确的方法是：

按钮。addEventListener（“单击”，addListAfterClick）

及

input.addEventListener（“按键”，addListAfterKeypress（事件））

这是错误的，因为现在
addListAfterKeypress
中的函数不需要访问上面使用的事件，并且只在需要告诉浏览器哪个键将通过keycode的帮助激活此函数时使用，请稍后保存它，因为我知道javascript中的eventlistener是如何工作的
如果您使用
（）
在eventlistener中编写函数，那么它将像正常函数一样执行。如果您已经完成了上面的工作，则不需要添加

eventlistener中的参数，因为它不需要参数eventlistener只是从上面执行
addListAfterKeypress（）
的输出，这是一个enter键（因为keycode是13）
，因为这样函数将被立即调用，而不是作为回调传递。例如，如果不在函数名的末尾放（）的话，就会发送一个引用，并且会以某种方式自动发送参数？我认为您应该仔细阅读，以便更好地理解事件。