Cómo pasar Evento como parámetro en la función JQuery

Question

Hola, estoy aprendiendo JQuery y he escrito una pequeña función en la que adjunto una función con un evento de clic de botón.

Este es el elemento principal del HTML

<script type="text/javascript"> 

    $(pageLoaded); 

    function pageLoaded() 
    { 
     $("#Button1").bind("click", 
          { key1: "value1", key2: "value2" }, 
          function buttonClick(event) 
          { 
           $("#displayArea").text(event.data.key1); 
          } 
          ); 
    }      

</script> 

Este es el cuerpo del HTML

<input id="Button1" type="button" value="button" /> 

<div id = "displayArea" style="border:2px solid black; width:300px; height:200px"> 

Este código funciona bien. Pero cuando intento escribir la función buttonClick fuera del método anonymus, ya no funciona.

Traté de llamar de esta manera:

$("#Button1").bind("click", 
        { key1: "value1", key2: "value2" }, 
        buttonClick(event)); 

function buttonClick(var event) 
{ 
     $("#displayArea").text(event.data.key1); 
} 

Esto no está funcionando. ¿Estoy cometiendo un error al pasar el evento como parámetro? ¿Cuál es la forma correcta de hacerlo sin usar métodos anónimos?

Answer 1

lo necesario para pasar un function reference como el controlador de clic, pero lo que está haciendo aquí

$("#Button1").bind("click", 
        { key1: "value1", key2: "value2" }, 
        buttonClick(event)); 

está llamando buttonClick(event) inmediatamente y el que return undefined y establece que a medida que la click handler. Debe pasar una referencia de función como buttonClick y obtendrá event parámetro automáticamente (jQuery lo enviará al llamar al controlador).

Código completo:

$(function(){ 
    $("#Button1").bind("click", 
        { key1: "value1", key2: "value2" }, 
        buttonClick); 

    function buttonClick(event) 
    { 
     $("#displayArea").text(event.data.key1); 
    } ​ 
}); 

Demostración:http://jsfiddle.net/joycse06/cjc9r/

---

actualización (basado en @ el comentario de Tadeck):

su código funcionará bien si use function expression l ike este

var buttonClick = function(event){ 
    $("#displayArea").text(event.data.key1); 
}; 

y hay que colocar este por encima de su first use. En este caso, antes de

$("#Button1").bind("click", ... 

Debido function expressions no son hoisted en la parte superior del ámbito actual como function declaration. Para que pueda usarlos only after el expression ha sido interpreted por JS interpreter.

Answer 2

Hay dos errores en su solución tendrá que cambiar

var sólo se usa para definir no una variable de un parámetro de una función

function buttonClick(event) 
{ 
    $("#displayArea").text(event.data.key1); 
} 

La otra cosa es la forma en que está asignando el controlador de eventos. Está asignando el valor de retorno buttonClick(event) que será undefined. Solo pásalo la función en sí.El objeto event se pasará automáticamente por jQuery

$("#Button1").bind("click", 
        { key1: "value1", key2: "value2" }, 
        buttonClick);