JavaScript イベント ハンドラのアロー関数内で `this` の代わりに `event.currentTarget` を使用するのはなぜですか?

.this in アロー関数: イベント ハンドラーの考慮事項

JavaScript を使用する場合、開発者はイベント ハンドラー内でアロー関数を利用するときに問題に遭遇する可能性があります。デフォルトでは、イベント コールバックでアロー関数が使用されている場合、イベント ハンドラーがバインドされている要素を表すためにこれを取得することが問題になります。これは、アロー関数の this の値が使用時ではなく定義中に決定されるために発生します。

この問題に対処するには、アロー関数を使用するときに this の代わりにevent.currentTarget を使用することをお勧めします。コールバック内で。 event.currentTarget は、現在実行されているイベント リスナーに関連付けられた DOM 要素を一貫して指定し、目的の要素を正確に参照できるようにします。 event.currentTarget の使用法は、イベントのキャプチャとバブリングの概念に基づいています。これらのメカニズムを理解することは、JavaScript でイベント処理を効果的に操作するために重要です。

event.currentTarget

は、イベント ターゲットと呼ばれる、イベント リスナーが定義されている要素を表します。 >

• event.target は、最初にイベントをトリガーした要素を表します。

• イベントのバブリングとキャプチャ

  中イベントの伝播、ブラウザの動作は、イベントのキャプチャとバブリングの使用によって影響を受ける可能性があります。どちらも DOM ツリー内のイベント フローに関係しますが、方向は異なります。

イベント バブリング

: イベントは DOM ツリーをターゲット要素からドキュメントのルートまで上に移動します。

• イベント キャプチャ: イベントは、ドキュメントのルートからターゲット要素まで、DOM ツリーの下に移動します。
• イベント処理のコンテキストでは、次の区別が行われます。 currentTarget とターゲットが明らかになります。イベントが親要素に委任され、子要素でイベントをトリガーする場合、currentTarget は親要素のままですが、target は子要素を参照します。この区別は、イベント リスナーがアタッチされた後に DOM に動的に作成または挿入された要素を扱う場合に特に重要になります。

  例: .currentTarget と .target

以下のスニペットを考えてみましょう:

このスニペットが実行されると、子要素または孫要素をクリックするとイベント バブリングがトリガーされます。結果の動作を次の表に示します。

Event Listener	this	currentTarget	target
function	child	parent	child/grand-child
jQuery	parent	parent	child/grand-child
Arrow function	undefined	parent	child/grand-child

表から明らかなように、アロー関数が使用されると、これは未定義を返し、代わりにevent.currentTargetを使用する必要性を強調しています。 event.currentTarget を使用すると、アロー関数内で常に正しい要素を参照できるため、JavaScript での効果的なイベント処理が保証されます。

以上がJavaScript イベント ハンドラのアロー関数内で `this` の代わりに `event.currentTarget` を使用するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。