javascript - 为什么在 removeItem 中不需要括号？为什么 li.onclick = removeItem 必须在 newItem() 函数内？

Question

1. 为什么 removeItem 不需要括号？
2. 为什么 li.onclick = removeItem 必须在 newItem() 函数内？
3. li.onclick 事件发生时的逻辑顺序是什么？ newItem() 是否被执行？如果是这样，它是如何触发的？

我以为只有回车键会触发newItem()，既然li.onclick = removeItem在newItem()里面，为什么点击会触发呢？

免责声明:我在网上找到了这段代码，但我不明白这些细节，希望大家帮忙。谢谢!

html

<input id="input" placeholder="What needs to be done?">

<ul id="list"></ul>

JavaScript

        function newItem() {
            var item = document.getElementById("input").value;
            var ul = document.getElementById("list");
            var li = document.createElement("li");
            if (document.getElementById("input").value != ""){
                li.appendChild(document.createTextNode(item));
                ul.appendChild(li);
                document.getElementById("input").value = "";                
            }
            li.onclick = removeItem;
        }


        document.body.onkeyup = function(e) {
          if (e.keyCode == 13) {
            newItem();
          }
        }

        function removeItem(e) {
            e.target.parentElement.removeChild(e.target);
        }

Answer 1

您不需要括号，因为您正在存储对函数的引用。稍后将调用该函数。请参阅以下示例:

function f1() {
    console.log("f1 called");
}

var function_storage = f1;

function_storage();

li 声明为 newItem 的局部变量，因此它只能在函数内部使用。

当 onclick 事件发生时，removeItem 函数的调用方式与上述示例中的 f1 相同。