Javascript：在页面加载而不是 onclick/onsubmit 时调用函数答案

【问题标题】：Javascript: Functions get called on page load instead of onclick/onsubmitJavascript：在页面加载而不是 onclick/onsubmit 时调用函数
【发布时间】：2021-09-11 21:00:31
【问题描述】：

我对 JS 比较陌生，但我以前用 C 编程过，我正试图了解它的整个事件驱动性质。我正在尝试创建一个脚本来验证表单输入，但是我的所有代码都在运行——if/else 中的所有内容、循环、你有什么——无论事件是否发生。为了测试，为了方便发帖，我写了一个简单的程序，也有这个问题。

HTML：

<button id="test">Test</button>

Javascript：

function init(){
    document.getElementById("test").onclick = alert("hello");
}

window.onload = init;

据我了解，应该在页面加载时调用 init 函数（window.onload），并在单击 ID 为“test”的按钮时弹出警报（onclick）。实际发生的情况是，一旦页面加载，警报就会弹出，如果我点击按钮，它会再次弹出。

我的想法是我对 JS 的执行顺序做出了一些错误的假设，但我想不出那是什么。有人能对此有所了解吗？

【问题讨论】：

标签： javascript html function onclick alert

【解决方案1】：

不对，应该是：

function init(){
    document.getElementById("test").onclick = function () { alert("hello"); };
}

这是因为您需要在 JavaScript 中将函数本身分配给 click 事件（alert 是一个函数）。

以此为例：

function hello() {
    alert("hello");
}

document.getElementById("test").onclick = hello;

注意我没有在hello函数后面加上括号()？那是因为我使用了对函数本身的引用。如果我加上括号，我实际上是在点击分配发生的时间点评估该功能。

这样做：

document.getElementById("test").onclick = hello();

将显示警报将在此行执行后立即显示alert。

【讨论】：

换句话说：x = alert() 表示：x 是alert() 语句的返回值。什么是返回值？让我们执行它以找出 — 这就是执行发生的地方！
感谢您的回复！实际上，这是有道理的。但是我将如何传递一个变量以供我也想在父函数中使用的触发函数使用？还是我会简单地使用一个全局变量？
您必须将函数调用本身包装成一个函数，例如：onclick = function () { myFunction(myVariable); }; 将具有相同的范围

【解决方案2】：

是的，您的 javascript 函数只会在页面加载时调用。如果您还想在单击测试按钮时调用该 init() 函数，请尝试这样：

JavaScript：

function init(){ alert("hello"); }

window.onload = init;

HTML: 
<button id="test" onClick='init()'>Test</button>

【讨论】：