javascript - コンストラクターでのイベント リスナーの追加

Question

function Foo(elementId, buttonId) {
this.element = document.getElementById(elementId);
this.button = document.getElementById(buttonId);
this.bar = function() {dosomething};
this.button.addEventListener('click', function(e) {this.bar();}, false);
}

var myFoo = new Foo('someElement', 'someButton');

コンストラクター内にイベント リスナーを追加したいのですが、うまくいきません。これは正しい構文で可能なことですか? 私はいつも電話に出ます：

this.button.addEventListener('click', function(e) {this.bar();}, false);

Answer 1

あなたのthis値はコンストラクターで変わります。セレクターに参照を保持し、その参照を使用できます。

function Foo(elementId, buttonId) {

    /*...*/

    var self = this;
    this.button.addEventListener('click', function(e) {self.bar();}, false);
}

---

または、変数を必要としないより現代的なソリューションは、を使用することFunction.prototype.bindです。

function Foo(elementId, buttonId) {

    /*...*/

    this.button.addEventListener('click', this.bar.bind(this), false);
}

この.bindメソッドは、渡されたものにバインドされbarた値を持つ新しい関数を返します。thisこの場合、thisコンストラクターからオリジナルにバインドされます。

Answer 2

thisイベント ハンドラーの は、イベントが追加された要素です。

outerthisにアクセスするには、別の変数に格納する必要があります。

Answer 3

thisクリックハンドラーでは、オブジェクトではなくボタン要素です。変数を使用してオブジェクトを参照します。var self = this;

function Foo(elementId, buttonId) {
    var self = this;
    this.element = document.getElementById(elementId);
    this.button = document.getElementById(buttonId);
    this.bar = function() {dosomething};
    this.button.addEventListener('click', function(e) {self.bar();}, false);
}