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=""ますが、これは避ける必要があります)。

を使用する代わりに、クロージャーを介してハンドラー内で使用できる別の変数に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 に答える