javascript - JQuery函数中如何将事件作为参数传递

Question

大家好，我正在学习 JQuery，我编写了一个小函数，我在其中附加了一个带有按钮点击事件的函数。

这是HTML的head元素

<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

您需要传递一个函数引用作为点击处理程序，但是您在这里做什么

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

立即调用 buttonClick(event)，返回 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 的评论):

如果您像这样使用函数表达式，您的代码将工作正常

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

并且您必须将它放在 first use 之上。在这种情况下

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

因为函数表达式不像函数声明那样提升在当前作用域的顶部。因此，只有在 表达式 已被 JS 解释器 解释 之后，您才能使用它们。