ホームページ > 記事 > ウェブフロントエンド > JavaScript イベント ハンドラのアロー関数内で `this` の代わりに `event.currentTarget` を使用するのはなぜですか?
JavaScript を使用する場合、開発者はイベント ハンドラー内でアロー関数を利用するときに問題に遭遇する可能性があります。デフォルトでは、イベント コールバックでアロー関数が使用されている場合、イベント ハンドラーがバインドされている要素を表すためにこれを取得することが問題になります。これは、アロー関数の this の値が使用時ではなく定義中に決定されるために発生します。
この問題に対処するには、アロー関数を使用するときに this の代わりにevent.currentTarget を使用することをお勧めします。コールバック内で。 event.currentTarget は、現在実行されているイベント リスナーに関連付けられた DOM 要素を一貫して指定し、目的の要素を正確に参照できるようにします。 event.currentTarget の使用法は、イベントのキャプチャとバブリングの概念に基づいています。これらのメカニズムを理解することは、JavaScript でイベント処理を効果的に操作するために重要です。
event.currentTarget
は、イベント ターゲットと呼ばれる、イベント リスナーが定義されている要素を表します。 >: イベントは DOM ツリーをターゲット要素からドキュメントのルートまで上に移動します。
このスニペットが実行されると、子要素または孫要素をクリックするとイベント バブリングがトリガーされます。結果の動作を次の表に示します。
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 サイトの他の関連記事を参照してください。