如何将参数传递给事件处理程序？

Question

我有一个函数对象，我想使用jquery在click上传递一个参数，但是它没有用。

<script>
var item=232;
$(function(){
    $('div').click(fn_clik('Mike'))
})

var fn_clik = function(name){
        alert('Name is:' + name + ' item is:' + item)
}
</script>

我不明白它背后的概念。任何人都可以解释我哪里出错了吗？

Answer 1

让你正在调用的函数返回一个函数，该函数的名称由参数传递，在闭包中：

$('div').click( fn_clik('Mike') );

var fn_clik = function(name){      
     return function() {
         alert('Name is:' + name + ' item is:' + item);
     }
}

或者使用匿名函数传递使用正确参数调用的原始函数：

$('div').click(function () {
    fn_clik('Mike')
});

快速说明，在原始代码中，您调用函数'fn_clik'而不是将其作为对象传递。所以你的代码正在评估：

$('div').click( undefined );

这是因为您原来的'fn_clik'没有返回值;

Answer 2

如果你写“func（...）”你调用你的函数，你必须写juste写函数名。

没有参数

像这样：

$('div').click(fn_clik);

带参数

如果你想得到参数，请使用这样的匿名函数：

$('div').click(function () {
    fn_clik('Mike')
});

请参阅此和事件变量。

此变量返回元素节点，事件返回点击事件。

$("body").click(function (event) {
    if (this == $("body")[0]) {
        alert("self");
    }
});

Demo

Answer 3

这是我常常做的，

<script>
    var item=232;
    $(function(){
        $('div').on('click',function(){
            fn_clik('Mike');
        });

    })

    function fn_clik(name){
            alert('Name is:' + name + ' item is:' + item)
    }
</script>

感谢。

Answer 4

您正在调用函数并在绑定时使用返回值（undefined），而不是获取对事件可以调用的函数的引用。

在函数表达式中包装函数调用，以便获得对它的引用：

$('div').click(function() { fn_clik('Mike'); });

您还可以使用proxy method创建一个绑定参数的函数：

$('div').click($.proxy(fn_clik, this, 'Mike'));

Answer 5

var item = 232;

$(function(){   
    $('div').click(function(e){fn_click("Mike");});
})

var fn_clik = function(name){      
    alert('Name is:' + name + ' item is:' + item)
}