¿Por qué se ejecutan las funciones no anónimas cuando se utiliza el controlador de eventos click?

Question

He estado explorando el uso de funciones personalizadas para controladores de eventos. En este ejemplo desglosado, intento que aparezca una alerta cuando el usuario hace clic en un botón.

¡Pero el cuadro de alerta aparece inmediatamente cuando se carga la página! ¿Qué estoy haciendo mal? (la porción comentada hace exactamente lo mismo).

Si defino la función BHaga clic() como

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

El resultado es también la misma.

JS dentro del encabezamiento:

<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> 

HTML relevante en el cuerpo:

<button>Click Me!</button> 

Answer 1

Estás evaluar su función, incluso antes de pasarlo.

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

Aquí, bclick se llama con esos argumentos, y el resultado se pasa al método click. Se debe pasar como una variable normal, así:

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

El problema obvio con esto, sin embargo, es el hecho de que no se puede pasar en argumentos personalizados.

También podría pasar en una función anónima que llama a su función:

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

Answer 2

Como dijo musicfreak. Sin embargo, si quieres ser realmente complicado y usar el código que tienes, entonces solo necesitas agregar return this al final de tu función de clic.

Answer 3

Si desea pasar argumentos al configurar su controlador de eventos, otra alternativa es devolver una función.

$("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); 
    }; 
}