Fatal编程技术网
  • javascript/
  • Javascript 如何将参数（事件除外）传递给事件处理程序？

Javascript 如何将参数（事件除外）传递给事件处理程序？

javascript

Javascript 如何将参数（事件除外）传递给事件处理程序？,javascript,event-handling,Javascript,Event Handling,下面的代码显示3个按钮，标签为“1”、“2”和“3”。单击每个按钮将警告标签 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/ja

下面的代码显示3个按钮，标签为“1”、“2”和“3”。单击每个按钮将警告标签

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                var a = [1, 2, 3];
                $.each(a, function(i, ai) {
                    $('<button />').text(i).appendTo('body')
                        .click(function() {alert(i);});
                });
            });
        </script>
    </head>
    <body>
    </body>
</html>


$（函数（）{
VarA=[1,2,3]；
$。每个（a，函数（i，ai）{
$（''）.text（i）.appendTo（'正文'）
。单击（函数（）{alert（i）；}）；
});
});
但是，如果我用
foo
替换
function（）{alert（I）；}
，并定义
function foo（）{alert（I）；}
，我将得到
变量I未定义的错误

那么，如何将参数（事件除外）传递给事件处理程序呢？我认为，如果事件处理程序长且复杂，将事件处理程序（
foo（）
在本例中）定义为命名函数将使代码更简洁。
$（function（）{

$(function() {
                var a = [1, 2, 3];
                $.each(a, function(i, ai) {
                    $('<button />').text(i).appendTo('body')
                        .click(function() { foo.apply(this,[i]);});
                });
            });


function foo( i )
{
   alert( i + " : " + $(this).text() );
}


VarA=[1,2,3]；
$。每个（a，函数（i，ai）{
$（''）.text（i）.appendTo（'正文'）
.click（function（）{foo.apply（this[i]）；}）；
});
});
功能foo（i）
{
警报（i+”：“+$（this.text（））；
}

第三种方法，我通常使用的方法是调用返回处理程序的函数。像这样：


<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            var bindFoo = function(x) {
                return function() {alert(x);};
            };
            $(function() {
                var a = [1, 2, 3];
                $.each(a, function(i, ai) {
                    $('<button />').text(i).appendTo('body')
                        .click(bindFoo(i));
                });
            });
        </script>
    </head>
    <body>
    </body>
</html>




var bindFoo=函数（x）{
返回函数（）{alert（x）；}；
};
$（函数（）{
VarA=[1,2,3]；
$。每个（a，函数（i，ai）{
$（''）.text（i）.appendTo（'正文'）
。单击（bindFoo（i））；
});
});


我在绑定函数中使用
x
，只是为了将它与主代码块中的
I
区分开来。
如果您查看，您会看到它有一个可选的
eventData
参数。例如，这将起作用：


function foo(e)
{
    alert(e.data.theI);
}

$(function ()
{
    var a = [1, 2, 3];
    $.each(a, function (i, ai)
    {
        $('<button/>').text(i).appendTo('body').bind("click", {theI: i}, foo);
    });
});


函数foo（e）
{
警报（如data.theI）；
}
$（函数（）
{
VarA=[1,2,3]；
$。每个（a，函数（i，ai）
{
$（''）.text（i）.appendTo（'body'）.bind（单击，{theI:i}，foo）；
});
});
不应该是
foo.call
<代码>应用获取数组。为什么要创建数组<代码>foo.call（这个，我）会简单一点。我喜欢这个答案。我想Ghommy应该使用
apply（）
而不是
call（）
，因为
apply（）
可以用来传递多个参数，这是一种更一般的情况。@powerboy-两者都可以用来传递多个参数
apply（）
要求将数据打包到数组中，而
call（）
可以在scope参数之后使用任意数量的参数。所以这两条语句是等价的：
myfunction.apply（this，[1,2,3，'four'））
和
myfunction.call（this，1,2,3，'four'）
。实际上，我发现使用
call（）
更容易、更自然。