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

How to pass Event as a parameter in JQuery function

提问by Manas Saha

Hi I am learning JQuery and I have written a small function where I am attaching a function with a button's click event.

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

this is the head element of the HTML

这是 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>

This is the body of the HTML

这是 HTML 的正文

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

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

This code works fine. But when I try to write the buttonClick function outside the anonymus method, it does not work anymore.

这段代码工作正常。但是当我尝试在匿名方法之外编写 buttonClick 函数时，它不再起作用。

I tried to call it this way:

我试着这样称呼它：

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

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

This is not working. Am I doing some mistake while passing the Event as parameter? what is the correct way to do it without using anonymous methods?

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

回答by Prasenjit Kumar Nag

You need to pass a function referenceas the click handler, but what you are doing here

您需要传递 afunction reference作为点击处理程序，但是您在这里做什么

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

is calling buttonClick(event)immediately and which return undefinedand sets that as the click handler. You have to pass a function reference like buttonClickand you will get event param automatically (jQuery will send that when calling the handler).

正在buttonClick(event)立即调用并将其return undefined设置为click handler. 您必须传递一个函数引用，例如buttonClick，您将自动获得事件参数（jQuery 将在调用处理程序时发送该参数）。

Full Code:

完整代码：

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

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

Demo:http://jsfiddle.net/joycse06/cjc9r/

演示：http : //jsfiddle.net/joycse06/cjc9r/

---

---

Update (Based On @Tadeck's comment):

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

Your code will work fine if you use function expressionlike this

如果您function expression像这样使用，您的代码将正常工作

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

And you have to place this above its first use. In this case before

你必须把它放在它的first use. 在这种情况下之前

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

Because function expressionsare not hoistedat the top of current scope like function declaration. So you can use them only afterthe expressionhas been interpretedby JS interpreter.

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

回答by Andreas

There are two mistakes in your solution you will have to change

您的解决方案中有两个错误，您必须更改

varis only used to define a variable not a parameter of a function

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

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

The other thing is the way you are assigning the event handler. You're assigning the return value of buttonClick(event)which will be undefined. Just pass it the function itself. The eventobject will be passed automatically by jQuery

另一件事是您分配事件处理程序的方式。您正在分配的返回值buttonClick(event)将是undefined. 只需将函数本身传递给它。该event对象将由 jQuery 自动传递

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

回答by Javed

You can do it as following:

你可以这样做：

$('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;
    }
}

回答by Chris Sprague

Here's how I passed the entire click event:

这是我传递整个点击事件的方式：

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

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