将函数 VARIABLE 传递给事件侦听器与传递函数 REFERENCE 有什么区别？

Question

阿卡：有什么区别：

示例 1：

button.onclick = foo;

var foo = function() {
           before = document.getElementById(“before”);
           var after = document.createElement(“div”);
           before.replaceWith(after);
}

注意foo不是用 parens() 调用的，它是用var foo定义的。

相对：

示例 2：

button.onclick = bar();

function bar () {
           before = document.getElementById(“before”);
           var after = document.createElement(“div”);
           before.replaceWith(after);
}

注意bar是用 parens() 调用的，它是用function bar().定义的function bar().

在我看来，第二个选项应该允许您将参数传递给函数（假设我传入： bar(“title”)因为我想设置after.id = “title” ）。 但是，每当我使用 parens () 调用函数时（因此， bar() ，无论是在onclick = bar()还是addEventListener("click", bar()) ，我都会收到以下错误：

Uncaught TypeError: before.replaceWith is not a function.

---

其他细节： 其他人告诉我问题的根源在于 JavaScript 异步程序执行。 特别是，他们给了我一个准备起飞的飞机与实际起飞的飞机的比喻。

飞机可能已经被告知飞行起飞区，并被告知它需要做的一切，但还没有发出发射信号。

有了函数变量，所有的准备工作就在启动之前准备好了。 而对于函数引用，平面没有事先准备好，所以在before.replaceWith被调用之前，“before”还没有被识别和选择，这就是为什么我得到 Uncaught TypeError 的原因。

有什么好的资源可以让我阅读这个吗？ 有没有你喜欢使用的好比喻？

Answer 1

onclick属性需要包含一个函数。 该函数将在点击事件发生时被调用。

您的第一个代码片段就是这样做的。 它将属性设置为foo函数。

您的第二个代码段没有将该属性设置为函数。 相反，它会在您进行赋值时调用该函数，并将该属性设置为该函数的结果。 您收到错误，因为在分配时before元素不存在。

如果你想向函数传递参数，你可以使用匿名函数来做到这一点：

button.onclick = function() {
    someFun(arg1, arg2);
};