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

Question

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

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 函数只会在页面加载时调用。如果您还想在单击“测试”按钮时调用该 init() 函数，请尝试这样：

JavaScript:

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

window.onload = init;

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

Javascript: Functions get called on page load instead of onclick/onsubmit