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

Question

我对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的执行顺序做了一些不正确的假设，但我不能想到那是什么。有人能够对此有所了解吗？

Answer 1

那不对，应该是：

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

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

以此为例：

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

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

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

这样做：

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

此行显示后，警告会立即显示alert 。

Answer 2

是的，你的javascript函数只会在页面加载时调用。如果你还想在单击Test按钮上调用init（）函数，那么请尝试这样：

JavaScript的：

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

window.onload = init;

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