Question

为什么我不需要括号的removeItem？
为什么li.onclick = removeItem必须位于newItem（）函数内部？
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

为什么我的removeItem不需要括号？

我假设您的意思是这一行代码：

li.onclick = removeItem;

因为括号会调用函数并将其结果分配给li.onclick。该函数不返回任何内容，也没有结果，并且在不提供预期的事件参数的情况下调用它会导致错误。

您要代替对函数的引用，而是将对函数的引用分配为onclick对象的li事件处理程序。稍后，如果用户单击该元素，则会然后调用该函数。

为什么li.onclick = removeItem必须位于newItem（）函数内部？

好吧，因为这就是li变量所在的位置。您可以在任意位置分配一个onclick处理函数，但是为了将其分配给特定的对象，则需要在一个对该对象有引用的范围内。在该函数之外，没有li变量，因此该行代码毫无意义。

li.onclick事件发生时的逻辑顺序是什么？是否执行newItem（）？如果是这样，如何触发？

否，执行removeItem()。浏览器为它提供对click事件的引用，该引用将在该函数内的e变量中。这样，您可以引用e.target来找到被单击的元素。

removeItem()由于在上面第一个问题中分配给li.onclick的引用而被触发。

Answer 2

我在Treehouse上找到了以下解释：

没有括号，您实际上并没有在调用该函数。没有括号的函数名称是对该函数的引用。

我们不在该代码中使用括号，因为我们不希望在遇到该代码的地方调用该函数。相反，我们希望将对函数的引用传递给.focus（）方法，并且只要元素获得焦点，该方法就会为我们调用函数。
不需要。但是，将事件与您在JS中创建的元素相关联的一种方法是在创建时将该事件与元素相关联。现在，每个元素一旦插入DOM都将具有该事件。有时，这可能更明智。例如，您正在经历一个for循环，以创建元素并将其插入到DOM中。您不必在以后再次循环添加点击事件，而只需在此处这样做就可以避免进行更多工作。

Answer 3

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

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

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

在发生onclick事件时，与上例中的removeItem一样，调用f1函数。

为什么在removeItem中不需要括号？为什么li.onclick = removeItem必须位于newItem（）函数内？

3 个答案: