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

这可以选择传递您自己的数据。

Answer 6

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

<script type="text/javascript">
    var myButton = document.getElementById("myButton");

    myButton.myMessage = "it's working";

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


</script>

这适用于我的测试套件，其中包括IE6 +的所有内容。匿名函数知道它所属的对象，因此您可以使用调用它的对象传递数据（在本例中为myButton）。

Answer 7

示例：

<input type="button" value="Click me" id="myButton">
<script>
    var myButton = document.getElementById("myButton");
    var test = "zipzambam";
    myButton.onclick = function(eventObject) {
        if (!eventObject) {
            eventObject = window.event;
        }
        if (!eventObject.target) {
            eventObject.target = eventObject.srcElement;
        }
        alert(eventObject.target);
        alert(test);
    };
    (function(myMessage) {
        alert(myMessage);
    })("Hello");
</script>

Answer 8

代表们：

function displayMessage(message, f)
{
    f(message); // execute function "f" with variable "message"
}

function alerter(message)
{
    alert(message);
}

function writer(message)
{
    document.write(message);
}

运行displayMessage函数：

function runDelegate()
{
    displayMessage("Hello World!", alerter); // alert message

    displayMessage("Hello World!", writer); // write message to DOM
}

Answer 9

你所做的是创建一个新的匿名函数，它接受一个参数，然后将其分配给函数内的局部变量myMessage。由于实际上没有传递任何参数，并且未传递值的参数变为null，因此您的函数只会执行alert（null）。

Answer 10

如果你像

那样写

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

它会起作用，但我不知道是否能回答你的问题。

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

10 个答案: