Javascript：函数在页面加载时被调用，而不是onclick / onsubmit [英] Javascript: Functions get called on page load instead of onclick/onsubmit

问题描述

我对JS比较陌生，但之前我已经使用C语言进行了编程，而且我正在努力让自己的头脑充满整个事件驱动的本质。我试图创建一个脚本来验证表单输入，但是我的所有代码都正在运行 - 无论事件是否发生，if / else中的所有内容，循环，你有什么 - 。为了测试，并且使它更容易在这里发布，我写了一个简单的程序，也有这个问题。

HTML：

 < button id =test>测试< /按钮> 
  

Javascript：

  function init（）{
 document.getElementById（test）。onclick = alert（hello）; 
} 
 
 window.onload = init; 
  

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

我的想法是，我对JS的执行顺序做了一些不正确的假设，但我不能想到这是什么。任何人都可以对此有所了解？

这是不对的，它应该是：

 函数init（）{
 document.getElementById（test）。onclick = function（）{alert（hello）; }; 
 
 
 
 
 
 $ b这是因为你需要在JavaScript中你需要将函数本身分配给点击事件（警报是一个函数）。
 
 
以此为例：
 函数hello（）{
 alert（hello）; 
} 
 
 document.getElementById（test）。onclick = hello; 
  
请注意，我没有放置括号（）之后 hello 函数？这是因为我使用了对函数本身的引用。如果我放上括号，我实际上是在点击分配的时间点评估那个函数。
 
 
 
所以：
  document.getElementById（test）。onclick = hello（）; 
  
将显示警报将显示警报 立即在此行被执行后。
 
I'm relatively new to JS, but I have programmed in C before, and I'm trying to get my head around the whole event driven nature of it. I'm trying to create a script that will validate form input, however all of my code is being run - everything inside if/else, loops, what have you - regardless of the event happening or not. To test, and to make it easier to post here, I've written a simple program that has this problem too.

HTML:
<button id="test">Test</button>
Javascript:
function init(){
    document.getElementById("test").onclick = alert("hello");
}

window.onload = init;
From what I understand, the init function should be called when the page loads (window.onload), and the alert should pop up when the button with the ID "test" is clicked (onclick). What is actually happening is that the alert is popping up as soon as the page loads, and will pop up again if I hit the button. 

My thinking is that I've made some incorrect assumptions about the order in which JS is executed, but I cant think of what that is. Is anyone able to shed some light on this?
解决方案
That's not right, it should be:
function init(){
    document.getElementById("test").onclick = function () { alert("hello"); };
}
This is because you need in JavaScript you need to assign the function itself to the click event (alert is a function).

Take this for example:
function hello() {
    alert("hello");
}

document.getElementById("test").onclick = hello;
Note that I didn't put the brackets () after hello function? That's because I'm using a reference to the function itself. If I put the brackets, I'm actually evaluating that function at the point in time of the click assignment happening.

So doing:
document.getElementById("test").onclick = hello();
Will show the alert will show the alert immediately after this line has been executed.

                        
这篇关于Javascript：函数在页面加载时被调用，而不是onclick / onsubmit的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！