如何将参数传递给JavaScript中的匿名函数？

Question

我试图弄清楚如何将参数传递给JavaScript中的匿名函数.

看看这个示例代码,我想你会明白我的意思:

<input type="button" value="Click me" id="myButton" />

<script type="text/javascript">
    var myButton = document.getElementById("myButton");
    var myMessage = "it's working";
    myButton.onclick = function(myMessage) { alert(myMessage); };
</script>

单击按钮时,it's working应显示消息:.但是,myMessage匿名函数内的变量为null.

jQuery使用了很多匿名函数,传递该参数的最佳方法是什么？

Answer 1

您的具体案例可以简单地更正为有效:

<script type="text/javascript">
  var myButton = document.getElementById("myButton");
  var myMessage = "it's working";
  myButton.onclick = function() { alert(myMessage); };
</script>

此示例将起作用,因为创建并指定为元素的处理程序的匿名函数将可以访问在创建它的上下文中定义的变量.

对于记录,处理程序(通过设置onxxx属性分配)需要单个参数来获取DOM传递的事件对象,并且您不能强制在其中传递其他参数

Answer 2

你所做的事情不起作用,因为你将一个事件绑定到一个函数.因此,它是定义在引发事件时将调用的参数的事件(即JavaScript不知道您绑定到onclick的函数中的参数,因此无法将任何内容传递给它).

你可以这样做:

<input type="button" value="Click me" id="myButton"/>

<script type="text/javascript">

    var myButton = document.getElementById("myButton");

    var myMessage = "it's working";

    var myDelegate = function(message) {
        alert(message);
    }

    myButton.onclick = function() { 
        myDelegate(myMessage);
    };

</script>

Answer 3

以下是使用闭包来解决您引用的问题的方法.它还考虑了可能在不影响绑定的情况下随时间改变消息的事实.它使用jQuery简洁.

var msg = (function(message){
  var _message = message;
  return {
    say:function(){alert(_message)},
    change:function(message){_message = message}
  };
})("My Message");
$("#myButton").click(msg.say);

Answer 4

通过从匿名函数中删除参数将在正文中可用.

    myButton.onclick = function() { alert(myMessage); };

有关更多信息,请搜索'javascript closures'

Answer 5

事件处理程序期望一个参数是被触发的事件.您恰好将其重命名为"myMessage",因此您正在警告事件对象而不是您的消息.

闭包可以允许您引用您在函数外定义的变量,但是如果您使用的是Jquery,您可能需要查看其特定于事件的API,例如

http://docs.jquery.com/Events/bind#typedatafn

这有一个传递您自己的数据的选项.