JavaScript では、プライベート メンバーと関数にアクセスする必要があるイベント ハンドラーの場合、イベント ハンドラー関数内でアクセスできるようにそれらの関数スコープに依存して、次のようにすることができます。
theElement.addEventListener("click", onClick);
以降：
theElement.removeEventListener("click", onClick);
TypeScript では、次のように匿名関数を使用してthis包含オブジェクトにする必要があります。
theElement.addEventListener("click", (event) => this.onClick(event));
この場合、イベントのリスニングから匿名関数を削除することはできません。後で削除できるように、クラスの一部としてイベント リスナー (プライベート フィールドとメソッドにアクセスできる) を作成するにはどうすればよいでしょうか。
ベストアンサー1
まず、JavaScript と TypeScript は、次のように記述した場合でもまったく同じように動作します。
theElement.addEventListener("click", onClick);
次に、匿名関数への参照を保持する方法は次のとおりです。
var f = (event) => this.onClick(event);
theElement.addEventListener("click", f);
// later
theElement.removeEventListener("click", f);
イベント リスナーを扱う場合、クラス メソッドをバインドするための便利なパターンがあります。
class MyClass {
init(theElement) {
theElement.addEventListener("click", this.onClick);
theElement.addEventListener("click", this.onClick2);
}
print() {
console.log("print");
}
onClick() {
this.print() // possible error (`this` is not guaranteed to be MyClass)
}
onClick2 = () => {
this.print() // no error, `this` is guaranteed to be of type MyClass
}
}
onClick2ただし、このコードは、クラスのオブジェクトごとに個別の関数を作成することに注意してください。多数のインスタンスを作成し、それらのリスナーをほとんど使用しないMyClass場合は、メモリ使用量に悪影響を与える可能性があります。MyClassonClick