如何将事件作为参数传递给jQuery函数

Question

如何将事件作为参数传递给jQuery函数

10

嗨，我正在学习 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);
}

这不起作用。我在传递事件参数时犯了一些错误吗？有没有不使用匿名方法的正确方法可以实现它？

- Manas Saha

4个回答

2

您的解决方案中有两个错误需要更改。

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

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

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

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

- Andreas

1

你可以按照以下方式进行：

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

- Javed

0

这是我如何传递整个点击事件的方法：

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

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

- Chris Sprague

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Prasenjit Kumar Nag · Accepted Answer

你需要将一个函数引用作为点击处理程序传递，但是你现在所做的是

$("#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);
};

你必须将它放在第一次使用它之前。在这个例子中，要放在

之前。

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

因为 函数表达式 不像 函数声明 一样在当前作用域的顶部被 提升，所以你只能在 JS解释器 解释完 表达式 后才能使用它们。