将函数VARIABLE传递给事件侦听器与传递函数REFERENCE之间的区别是什么

Question

Aka：之间有什么区别

示例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().定义的

在我看来，第二个选项应该允许您向函数传递参数(比如我传递：bar(“title”)，因为我想设置after.id = “title”(。然而，每当我用parens(((所以，bar()，无论是在onclick = bar()还是addEventListener("click", bar())中(调用函数时，我都会得到以下错误：

Uncaught TypeError: before.replaceWith is not a function.

---

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

这架飞机可能已经被告知飞行起飞区，并被告知需要做什么，但还没有发出发射信号。

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

有什么好的资源可以让我读到吗？你喜欢用什么好的比喻吗？

Answer 1

onclick属性需要包含一个函数。当单击事件发生时，将调用该函数。

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

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

如果您想向函数传递参数，可以使用匿名函数：

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