ES6クラスメソッドを使用したDOMイベント処理

Question

StackOverflowがこのトピックを表示する正しい場所であるかどうかは完全にはわかりませんが、間違っていると修正されると思います。

---

私は、プロトタイプチェーン（またはES6「クラス」）内DOMイベントハンドラでを対処するための「より良い練習」は何か、自分自身を求めています。

node.addEventListener('click', this.clickHandler, false); 

そのメソッドが呼び出されたときにあなたは明らかにあなたのthisコンテキストを失う

（以下フル例）：あなたのようなメソッドをバインドする場合

、問題が発生します。私たちは、この問題をその方法（this.clickHandler.bind(this)）に結びつけることで、この問題を解決することができます。この手法を使用する際の唯一の問題は、もちろんbind()が別の関数参照を返すことです。これは、異なる機能を扱っているため、ハンドラを単に削除するだけでは意味がありません。

node.removeEventListener('click', this.clickHandler); 

私はこれまで考えることができる唯一の方法は、あなたがイベントにアタッチする前にバインドされたメソッドを作成し、またあなたのthisコンテキスト変数に格納するために、次のようになります。

this._boundClickHandler = this.clickHandler.bind(this); 
node.addEventListener('click', this._boundClickHandler, false); 

はい、これがない仕事が、それ非常に醜いと非常に直感的ではないようです。 ES6クラスにこの種の問題を解決するためのより良いパターンがありますか？

class foo { 
    constructor() { 
     this._boundClickHandler = this.clickHandler.bind(this); 
     document.body.addEventListener('click', this._boundClickHandler, false); 
    } 

    clickHandler(event) { 
     // do stuff 
     document.body.removeEventListener('click', this._boundClickHandler); 
    } 
} 

Answer 1

ES6自体は、あなたが好きな解決策を持っていませんが、ES7クラスのプロパティを使用することができます。

class foo { 
    constructor() { 
     document.body.addEventListener('click', this.clickHandler, false); 
    } 

    clickHandler = event => { 
     // do stuff 
     document.body.removeEventListener('click', this.clickHandler); 
    } 
} 

はclickHandlerは、脂肪矢印の関数である、バインドされた「この」文脈を持っています

class foo { 
 
    static defaults() { 
 
    return { 
 
     events: { 
 
     "click .node_identifier": "nodeClick" 
 
     } 
 
    }; 
 
    } 
 
    
 
    nodeClick(e) { 
 
    //Do stuff 
 
    } 
 
}

：あなたは

が

Answer 2

ます。また、ES6で利用可能なデフォルトのオプションを使用して、イベントを返すことができますしたいかを正確にあるクラスのインスタンスへ