Come passare l'evento come parametro nella funzione JQuery

Question

Ciao sto imparando JQuery e ho scritto una piccola funzione in cui allego una funzione con l'evento click di un pulsante.

questo è l'elemento capo 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> 

Questo è il corpo del HTML

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

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

Questo codice funziona bene. Ma quando provo a scrivere la funzione buttonClick al di fuori del metodo anonymus, non funziona più.

ho provato a chiamare in questo modo:

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

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

Questo non funziona. Sto facendo qualche errore durante il passaggio dell'evento come parametro? qual è il modo corretto di farlo senza usare metodi anonimi?

Answer 1

È necessario passare un function reference come il gestore click, ma quello che stanno facendo qui

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

sta chiamando buttonClick(event) immediatamente e che return undefined e set che come il click handler. Devi passare un riferimento alla funzione come buttonClick e otterrai automaticamente il parametro evento (jQuery invierà quello quando chiamerai il gestore).

codice completo:

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

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

Demo:http://jsfiddle.net/joycse06/cjc9r/

---

Update (Based On @ commento di Tadeck):

Il tuo codice funziona bene se si utilizzare function expression l ike questo

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

e si deve porre questo sopra del suo first use. In questo caso prima

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

Poiché function expressions non sono hoisted in cima dell'ambito corrente come function declaration. Quindi puoi usarli only after il expression è stato interpreted entro il JS interpreter.

Answer 2

Ci sono due errori nella soluzione si dovrà cambiare

var viene utilizzato solo per definire una non variabile un parametro di una funzione

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

L'altra cosa è il modo in cui si sta assegnando il gestore dell'evento. Assegnando il valore restituito buttonClick(event), che sarà undefined. Passa semplicemente la funzione stessa.L'oggetto event verrà passato automaticamente da jQuery

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