JQuery関数のパラメータとしてイベントを渡す方法

Question

こんにちは私はJQueryを学んでおり、ボタンのクリックイベントで関数をアタッチしている小さな関数を書いています。

これはこれは、HTML

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

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

このコードは正常に動作のボディであるHTML

<script type="text/javascript"> 

    $(pageLoaded); 

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

</script> 

のhead要素です。しかし、匿名メソッドの外にbuttonClick関数を書き込もうとすると、もう動作しません。

私はこのようにそれを呼び出そうとしました：

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

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

これが機能していません。イベントをパラメータとして渡している間に何か間違いをしていますか？匿名メソッドを使用せずにそれを行う正しい方法は何ですか？

Answer 1

あなたは、クリックハンドラとしてfunction referenceに合格する必要がありますが、あなたはここでやっている

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

はすぐbuttonClick(event)を呼び出して、どのreturn undefinedをして設定されているものとしてclick handlerいます。 buttonClickのような関数リファレンスを渡す必要があります。自動的にイベントパラメータを取得します（jQueryはハンドラを呼び出すときにそれを送信します）。

全コード：

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

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

デモ：http://jsfiddle.net/joycse06/cjc9r/

---

（Tadeckさんのコメント@に基づいて）更新：

あなたならばあなたのコードは正常に動作しますfunction expression lを使用ike this

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

これをfirst useの上に配置する必要があります。

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

前にこの場合function expressionsはfunction declarationのような現在のスコープの上部にhoistedではありませんので。だからあなたはそれらを使用することができますonly afterexpressioninterpretedによってJS interpreterされています。

Answer 2

あなたは

varを変更する必要がありますあなたのソリューションに2つの間違いがありますが唯一の他の事は、あなたが代入されている方法である変数ではない関数のパラメータ

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

を定義するために使用されますイベントハンドラ 戻り値buttonClick(event)はundefinedに割り当てられます。関数自体に渡してください。eventオブジェクトは、実際に彼らは間違っているのではなく、単にコードを投稿したかを説明した最初の人物であることのためのjQuery

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