Question

我正在关注一个javascript视频教程，在该教程中我们将学习事件监听器。我们编写了以下小型Web应用程序的代码，可让您在列表中输入元素。

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

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

//If there is just one parameter it gets transfered
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));

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

非常感谢您的时间，祝您有美好的一天：D

Answer 1

添加事件侦听器时，会将特定事件绑定到函数。这就像对浏览器说：“嘿，每当按钮元素上发生单击事件时，请记住执行addListAfterClick函数”。为此，您只需指定事件发生时需要调用的函数的名称即可。如果在函数名称的末尾添加()，则将立即调用它（运行它），而不是将其另存为将来要调用的引用（回调）。

Answer 2

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

element.addEventListener（event，function，useCapture）; 每当我们使用事件监听器时，您都需要添加不带（）的函数，因为使用（）会使函数在您不需要的事件单击发生之前运行。

正确的方法是此按钮。addEventListener（“ click”，addListAfterClick）;

和input.addEventListener（“ keypress”，addListAfterKeypress（event））;是错误的，因为现在addListAfterKeypress内部的函数不需要访问上面使用的acsses事件，仅在需要告诉浏览器哪个键将借助键代码激活此功能时使用

通过这种方式，您还可以使用由event.which===13插入的event.keycode===13

Answer 3

javascript将其保存以备后用，因为这是JavaScript内部eventlistener的工作方式如果您在带有()的eventlistener中写入函数，则它将像普通函数一样执行

Answer 4

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

eventlistener内部的参数，因为它不希望参数eventlistener只是从上方执行addListAfterKeypress()的输出，这是回车键（因为键码为13）

JavaScript addEventListener回调逻辑

4 个答案: