0

我制作了 JS 脚本：

var zzz;
zzz = {
    fff: function (Id) {
        alert("You did it! Id="+Id);
    },
    main: function (Id) {
        var button, elements;
        button = document.createElement("input");
        button.type = "submit";
        button.onclick = function () {
            zzz.fff(Id);
        };
        elements = document.getElementById(Id);
        elements.appendChild(button);
    }
};

和 HTML，我在其中对其进行了测试：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

    <head>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
        <title>My Web Page!</title>
        <script type="text/javascript" src="test.js"></script>
    </head>

    <body>
        <div id="div001"></div>
        <div id="div002"></div>
        <script type="text/javascript">
            object1 = zzz;
            object1.main("div001");
            object2 = zzz;
            object2.main("div002");
        </script>
    </body>

</html>

为什么它只有在我写的时候才有效button.onclick = function () { zzz.fff(Id); };，而且用this.fff(Id)它不起作用？

4

1 回答 1

1

当您绑定事件处理程序（例如onclick）时，处理程序内部this成为触发事件的元素（除非您使用了内联onclick=""属性，应避免使用）。

除了 using zzz，您还可以通过闭包复制this到处理程序内部可用的另一个变量：

var that = this;
button.onclick = function () {
    that.fff(Id);
};

或者你可以使用Function.prototype.bind：

var clickHandler = button.onclick = function () {
    this.fff(Id);
};
button.onclick = clickHandler.bind(this);
于 2013-01-23T20:21:35.263 回答