Question

为什么有必要在JavaScript中包含 function（）？

document.getElementById("mydiv").onclick = function() { myFunction(); };

为什么只是调用你想调用的函数不起作用？

document.getElementById("mydiv").onclick = myFunction();

Answer 1

onclick处理程序需要一个函数来调用（例如myFunction），而不是函数调用的结果（例如myFunction()）。所以试试这个：

document.getElementById("mydiv").onclick = myFunction;

本质上onclick setter期待一个可执行函数。通过编写myFunction()，您要求在调用onclick setter之前调用myFunction。相反，您希望传递（引用）myFunction，以便事件处理程序可以稍后调用它。

---编辑：不太常见---

正如@Zeta建议的那样，重要的是传递给setter的东西，而不是它是否来自一个函数。所以完全可以这样做：

function myFunctionMaker() {
    return function() { ... };
}
blah.onclick = myFunctionMaker();

这里，myFunctionMaker正在返回一个函数，因此结果实际上是可执行的。这不是常见的事情，所以如果这没有意义，请坚持传递函数的第一个选项。

Answer 2

在作业中

document.getElementById("mydiv").onclick = myFunction();

您在左侧分配调用myFunction()的结果，而不是函数对象。比如，如果myFunction()返回'Hello'，那么分配相当于

document.getElementById("mydiv").onclick = 'Hello';

这不是你想要的。相比之下，function () {...}是分配给onclick的代码段，将在事件发生时被调用。

请注意，您可以使用function () {...}中的参数：

... = function () { return myFunction ('Hello', 1, x, y); }

其中x和y是在定义发生的范围内可见的变量。

如果您不需要任何参数，那么您可以简单地执行此操作：

document.getElementById("mydiv").onclick = myFunction;

鉴于myFunction是指向相应代码段的指针。

Answer 3

.onlick属性需要事件处理程序，在此上下文中只需函数。现在让我们看一下右侧的类型，假设myFunction没有返回任何内容（因此undefined）：

typeof function() { myFunction(); } === "function"
typeof myFunction()                 === "undefined"

正如您所看到的，调用myFunction根本不会为您提供功能，因此它与onclick属性不兼容。请记住，显然

typeof myFunction                   === "function"

并且您的第一行代码可以简化为

document.getElementById("mydiv").onclick = myFunction;

Answer 4

function() { myFunction(); };

是一个函数表达式而

myFunction();

是一个函数调用。当您执行后者时，您只需调用该函数，结果将被放入onclick。在第一种情况下，您实际上是在提供功能，这就是为什么您需要使用前一种表示法。

给出不带括号的函数名称也可以正常工作，如：

document.getElementById("mydiv").onclick = myFunction;

因为myFunction这里是标识符。

Answer 5

实际上，一个函数名后跟括号'（）'是一个invokation，而名称本身只代表对该函数的引用（你想要分配给像.onclick这样的处理程序）。