Perché le funzioni non anonime vengono eseguite quando si utilizza il gestore eventi click?

Question

Ho esplorato l'utilizzo di funzioni personalizzate per gestori di eventi. In questo esempio ridotto, sto cercando di far apparire un avviso quando l'utente fa clic su un pulsante.

Ma la finestra di avviso si solleva immediatamente come il caricamento della pagina! Che cosa sto facendo di sbagliato? (la parte commentata fa esattamente la stessa cosa).

Se definisco la funzione BFare clic() come

function bclick(foo, bar){ ... } 

Il risultato è anche lo stesso.

JS nell'intestazione:

<script type="text/javascript"> 

var bclick = function(foo, bar){alert(foo + " " + bar + "\n");} 

//$(document).ready(function(){ 
// $("button").click(bclick("Button","Clicked")); 
// }); 

$("button").click(bclick("Button","Clicked")); 

</script> 

Rilevante HTML nel corpo:

<button>Click Me!</button> 

Answer 1

si sta valutando la funzione prima ancora di passare.

$("button").click(bclick("Button","Clicked")); 

Qui, bclick si chiama con tali argomenti, e il risultato viene passato al metodo click. Si vuole far passare come una normale variabile, in questo modo:

$("button").click(bclick); 

Il problema evidente con questo, però, è il fatto che non si può passare in argomenti personalizzati.

Si potrebbe anche passare a una funzione anonima che chiama la funzione:

$("button").click(function() { bclick("Button", "Clicked"); }); 

Answer 2

Come ha detto musicfreak. Tuttavia, se vuoi essere davvero complicato e utilizzare il codice che hai, allora devi solo aggiungere return this alla fine della tua funzione bclick.

Answer 3

Se si vuole passare gli argomenti quando si imposta il gestore di eventi, un'altra alternativa è quello di restituire una funzione.

$("button").click(bclick("Button","Clicked")); 

function bclick(foo, bar) { // called once when the event handler is setup 
    return function(e) { // called every time the event is triggered 
     // you still have the original `foo` and `bar` in scope, 
     // and a new `e` (event object) every time the button is clicked 
     console.log(foo, bar, e); 
    }; 
}