如何在JQuery函数中将Event作为参数传递

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

这段代码工作正常.但是当我尝试在anonymus方法之外编写buttonClick函数时,它不再起作用了.

我试着这样称呼它:

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

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

这不起作用.在将Event作为参数传递时,我是否犯了一些错误？不使用匿名方法的正确方法是什么？

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像这样

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

你必须把它置于其上方first use.在这种情况下之前

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

因为function expressions不在hoisted当前范围的顶部function declaration.所以,你可以使用它们only after的expression已经interpreted通过JS interpreter.