Javascript 如何在JQuery函数中将事件作为参数传递

大家好，我正在学习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>

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

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

---

这是行不通的。我在将事件作为参数传递时是否出错？不使用匿名方法的正确方法是什么？

您需要传递一个

函数引用作为单击处理程序，但是您在这里做什么呢

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

正在调用
按钮立即单击（事件）
，该按钮返回未定义的

，并将其设置为

单击处理程序

。您必须传递一个函数引用，如

按钮单击

，您将自动获得事件参数（jQuery将在调用处理程序时发送该参数）

完整代码：

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

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

演示：

---

更新（基于@Tadeck的评论）：

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

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

如果像这样使用

函数表达式

，您的代码将工作正常

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

您必须将其置于其

第一次使用的上方。在这种情况下，以前

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

因为
函数表达式
不会像
函数声明
一样被提升到当前范围的顶部。因此，只有在
JS解释器
对
表达式
进行了
解释后，您才能使用
，
，解决方案中有两个错误，您必须更改

var
仅用于定义变量，而不是函数的参数

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

另一件事是分配事件处理程序的方式。
您正在分配
按钮单击（事件）
的返回值，它将是
未定义的
。只需将函数本身传递给它。jQuery将自动传递
事件
对象

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

您可以按以下方式执行此操作：

$('input[name="pin-code"], input[name="work-pin"]').on({
        keypress: function(e) {
            numbersOnly(e);   //function
        }
    });


function numbersOnly(e) {    //function
    e.preventDefault();
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       return false;
    }
}

$（'input[name=“pin code”]，input[name=“work pin”]）。在({
按键：功能（e）{
numbersOnly（e）；//函数
}
});
函数号仅限（e）{//函数
e、 预防默认值（）；
如果（e.which！=8&&e.which！=0&&e.which<48 | e.which>57））{
返回false；
}
}
以下是我如何通过整个点击事件：

$('#body').click({event}, onClickMethod);

function onClickMethod(evt){
    console.log("Click evt:", evt);
}

+1作为第一个真正解释他们做错了什么的人，而不仅仅是发布代码。+1。值得一提的是，如果你在这个答案中定义函数的发生方式，一切都会正常工作。但是，如果您这样定义函数：
var buttonClick=function（event）{…}
，则需要将定义放在使用“函数引用”之前（在这种情况下：在调用
$（“#Button1”）.bind（…）
之前）。@Tadeck，谢谢，先生，我可以将其添加到我的答案中吗？谢谢，很好。早些时候我在想，既然我在调用函数，我需要匹配调用代码中的函数签名。@Tadeck，先生，更新答案，检查并自由编辑，如果您发现任何错误。