動的要素を扱う場合、イベント リスナーで「this」参照をどのように処理しますか?

イベント リスナー内での "this" 参照の処理

オブジェクト指向プログラミングでは、"this" キーワードは、イベント リスナー内のオブジェクトを参照します。メソッドが呼び出されています。ただし、addEventListener を使用して動的にレンダリングされた要素のイベントを処理する場合、「this」参照が問題になる可能性があります。

問題

提供されたコードに記載されているように、 addEventListener を使用してイベント リスナーがセルにアタッチされると、ハンドラー関数内の "this" 参照は、テーブルを作成したオブジェクト インスタンスではなく、クリックされた要素を参照します。このため、イベント ハンドラー内からオブジェクトのプロパティやメソッドにアクセスすることが困難になります。

解決策: Bind または handleEvent

この問題に対する 1 つの解決策は、bind を使用することです。これにより、特定の関数へのすべての呼び出しに対して「this」として使用される値を指定できます。イベント ハンドラー関数をオブジェクト インスタンスにバインドすることで、ハンドラー関数内の "this" 参照の一貫性が確保されます。

バインドを使用した例:

<code class="javascript">cell1.addEventListener("click", this.handleCellClick.bind(this), false);</code>

別のアプローチは次のとおりです。 handleEvent 関数を実装します。この関数は、オブジェクト内のあらゆるイベントをキャッチして処理するように設計されています。 handleEvent メソッドをオーバーライドすることで、オブジェクトのすべてのイベント タイプの動作を指定できます。

handleEvent の使用例:

<code class="javascript">ticketTable.prototype.handleEvent = function(event) {
  if (event.type === "click") {
    console.log(this.tickets.length); // Accesses the array property
  }
};

cell1.addEventListener("click", this, false);</code>

イベント リスナーの削除

バインドを使用する場合、イベント リスナーを適切に削除するのが難しい場合があることに注意することが重要です。代わりに、handleEvent メソッド、またはイベント リスナーのクリーンアップをサポートするサードパーティ ライブラリの使用を検討してください。

要約すると、bind を使用するか、handleEvent を実装すると、イベント ハンドラー内で「this」参照を制御でき、適切な処理が可能になります。オブジェクトのプロパティとメソッドにアクセスします。メモリ効率を維持するには、適切なイベント リスナーのクリーンアップも重要です。

以上が動的要素を扱う場合、イベント リスナーで「this」参照をどのように処理しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。