Question

我正在学习JS而我正在使用Head First书籍。在其中一个课程中，给出了以下代码来为按钮设置事件处理程序：

window.onload = init

function init() {
    var button = document.getElementById("addButton");
    button.onclick = handleButtonClick;
}
function handleButtonClick() {
    alert("Button has been pressed");   
}

当我在浏览器中测试代码时，单击按钮时会弹出警报，正如预期的那样。所以我重新安排了一些事情并试了一下，看看会发生什么：

window.onload = init

function init() {
    var button = document.getElementById("addButton");
    button.onclick = alert("Button has been pressed");
}

现在，一旦页面加载，警报就会显示，但我无法弄清楚原因。为什么在单击按钮之前警报不会等待？我是JS和编程的完整新手。谢谢！

Answer 1

您需要将其括在一个函数中，否则它将立即执行：

＆＃13;

window.onload = init

function init() {
    var button = document.getElementById("addButton");
    button.onclick = function(){ alert("Button has been pressed") };
}

＆＃13;

<button id="addButton">Alert</button>

＆＃13;

这是因为您尝试将alert()分配给按钮的onclick属性，这是不可能的。 JavaScript经常失败＆＃34;很好，＆＃34;为了防止网页完全破坏而采取奇怪的举动而不是抛出错误。当它看到alert()时，会立即执行。

如果将它包装在函数中，则可以将该函数分配给onclick属性，它将按预期工作。

Answer 2

预计。 Javascript会运行alert("Button has been pressed");您可能希望将其更改为button.onclick = function() {alert("Button has been pressed"); };

有用的阅读：

Why do you need to invoke an anonymous function on the same line?

http://www.quirksmode.org/js/events_advanced.html

Answer 3

是的，onclick需要一个函数 - 只需传递alert()即可立即执行。你需要这样做：

button.onclick = function() {
    alert("Button has been pressed");
}

button.onclick执行的时间

3 个答案: