Javascript: le funzioni vengono richiamate al caricamento della pagina invece di onclick/onsubmit

Question

Sono relativamente nuovo a JS, ma in precedenza ho programmato in C e sto cercando di capire come funziona l'evento. Sto provando a creare uno script che convaliderà l'input del modulo, tuttavia tutto il mio codice viene eseguito - tutto all'interno se/else, cicli, cosa hai - indipendentemente dall'evento che si sta verificando o meno. Per testare e rendere più facile postare qui, ho scritto un semplice programma che ha anche questo problema.

HTML:

<button id="test">Test</button> 

Javascript:

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

window.onload = init; 

Da quello che ho capito, la funzione init dovrebbe essere chiamato al caricamento della pagina (window.onload), e l'avviso dovrebbero pop-up quando il pulsante con l'ID "test" viene cliccato (onclick). Quello che sta realmente accadendo è che l'avviso sta spuntando non appena la pagina viene caricata, e comparirà di nuovo se premo il pulsante.

Il mio pensiero è che ho fatto alcune ipotesi errate sull'ordine in cui viene eseguito JS, ma non riesco a pensare a cosa sia. Qualcuno è in grado di far luce su questo?

Answer 1

Questo non è giusto, dovrebbe essere:

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

Questo è perché è necessario in JavaScript è necessario assegnare la funzione stessa all'evento click (avviso è una funzione).

Prendete questo ad esempio:

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

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

Si noti che non ho messo le parentesi () dopo hello funzione? Questo perché sto usando un riferimento alla funzione stessa. Se metto le parentesi, in realtà sono che valuta quella funzione nel momento in cui si verifica l'assegnazione dei clic.

così facendo:

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

mostrerà l'avviso mostrerà il alertsubito dopo questa linea è stata eseguita.

Answer 2

sì la funzione javascript chiamerà solo quando la pagina verrà caricata Se lo volete anche chiamare quella funzione init() sul tasto di scatto di prova quindi per favore provare in questo modo:

JavaScript:

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

 
window.onload = init;

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