Как передать событие в качестве параметра в функции JQuery

Question

Привет Я изучаю JQuery, и я написал небольшую функцию, где я прикрепляю функцию с событием нажатия кнопки.

это главный элемент HTML

<script type="text/javascript"> 

    $(pageLoaded); 

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

</script> 

Это тело HTML

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

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

Этот код работает отлично. Но когда я пытаюсь написать функцию 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/

---

Update (на основе @ комментарий Tadeck в):

Ваш код будет работать хорошо, если вы использование function expression l икэ это

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

И вы должны поместить это выше его first use. В этом случае перед

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

Поскольку function expressions не hoisted в верхней части текущей области, как function declaration. Так можно использовать их only afterexpression был interpreted от JS interpreter.

Answer 2

Есть две ошибки в вашем решении, вам придется изменить

var используется только для определения переменной не параметр функции

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

Другое дело, как вы назначаете обработчик события. Вы назначаете возвращаемое значение buttonClick(event), которое будет undefined. Просто передайте ему функцию.Объект event будет передан автоматически JQuery

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