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();

Will show the alert 将在执行此行后立即显示alert。