Differenze tra la funzione javascript

Question

So che questa domanda potrebbe essere sciocca vorrei solo sapere, e non sono sicuro se l'argomento corrisponde alla mia domanda corrente. Ma ho ancora pensato di chiederlo.

<button id="Clk">Click on me</button> 

    document.getElementById("Clk").onclick = function(){alert("firedme!")} 

    document.getElementById("Clk").onclick = fire(); 

    function fire(){alert("I am fired!")} 

Ho vedere il primo "funzione" non viene attivato al caricamento della pagina o aggiornare, ma dove, come secondo fuoco() viene attivato
quando la pagina caricata, e poi questa funzione non viene attivato al clic . Sono confuso, ho solo bisogno di chiarimenti in questo.

Answer 1

la seconda incendi immediatamente perché si è utilizzato parentesi (). Quando si assegna un gestore di eventi a una funzione esistente, non includere la parentesi.

Quello che succede è che la funzione viene eseguita immediatamente e il valore di ritorno è assegnato come gestore di eventi.

Per illustrare, è lo stesso di fare:

var result = fire(); 
console.log(result); // undefined 

document.getElementById("Clk").onclick = result; 

Come si può vedere, undefined viene passato come il gestore di eventi.

Answer 2

È necessario passare fire a onclick come riferimento di funzione, non a una chiamata.

document.getElementById("Clk").onclick = fire; 

Quando si passa fire() al gestore onclick, si innesca immediatamente e il ritorno dalla funzione è quello che si sta impostando onclick troppo. Passando un riferimento alla funzione, interrompe l'esecuzione finché non viene attivato l'evento. È essenzialmente uguale al precedente gestore di funzioni anonimo.

rlemon stato così gentile da fare una bella dimostrazione fiddle < - qui

Answer 3

Inoltre, vorrei aggiungere alcune altre cose.

In primo luogo, pensare a onclick come una proprietà ordinaria di un oggetto.

Quindi, object.onclick = value dove value = functionName() è perfettamente bene, per esempio, potrebbe essere functionName() restituendo un valore utilizzando return something;

Ma onclick non è una proprietà comune. Quando il motore JS browser incontra assegnazioni alle proprietà basate su eventi (ad esempio onclick, ondblclick, onmouseover, ecc), si crea uno stack per ogni elemento , costituito da mappatura b/w onSomeEvent e gestore.

Il gestore è un oggetto funzione. Ma se si fa qualcosa di simile element.onSomeEvent = functionName(); si sta semplicemente chiamando la funzione functionName() e questo sarebbe stato bene se functionName() è stata definita come

function functionName() {return function(){/*do something*/};} 

Ma poiché functionName nel tuo caso non restituisce una funzione, viene visualizzato un risultato inaspettato.Questo è il principale svantaggio di lingue come JavaScript JavaScript . In un linguaggio fortemente tipizzato che avrebbe generato un errore ... perché

class Element { 
    Function onclick = null; 
    Function ondblclick = null; 
    /*other code*/ 
} 
document.getElementById('idName').onclick = new Function(); // correct 
document.getElementById('idName').onclick = function(){}; // correct 
document.getElementById('idName').onclick = functionName(); 
/* 
* correct if functionName defined as 
* Function functionName() {return new Function();} or 
* Function functionName() {return function(){};} 
* and incorrect for any other case 
*/