イベント ハンドラー内のアロー関数で「this」の動作が異なるのはなぜですか?

イベント ハンドラーのアロー関数と「this」バインディング

JavaScript の ES6 アロー関数を使用する場合、開発者が依存しているときに予期しない動作が発生する可能性があります。イベントハンドラー内の「this」キーワード。従来の関数式とは異なり、アロー関数は、呼び出されたコンテキストからではなく、周囲のスコープから this コンテキストを継承します。

問題: 未定義 $(this)

提供されたコード スニペットでは、アロー関数のアプローチにより、イベント リスナーにアタッチされた意図された要素ではなく、グローバル コンテキスト (ウィンドウ オブジェクト) に「this」がバインドされます。その結果、グローバル コンテキスト内に対応する jQuery オブジェクトがないため、$(this) は未定義を返します。

解決策: この問題を解決するには、event.currentTarget

を使用します。正しい要素参照を取得するには、イベント ハンドラー内でevent.currentTargetを使用することをお勧めします。 「this」とは異なり、event.currentTarget は常に、イベント リスナーによって現在処理されている DOM 要素を参照します。

event.currentTarget を使用した例

変更されたコード スニペットは次のとおりです。 event.currentTarget の修正:

<code class="javascript">dom.videoLinks.click((e) => {
            e.preventDefault();
            console.log($(e.currentTarget));
            var self = $(e.currentTarget),
                url = self.attr(configuration.attribute);

            eventHandlers.showVideo(url);

            // Deactivate any active video thumbs
            dom.videoLinks.filter('.video-selected').removeClass('video-selected');

            // Activate selected video thumb
            self.addClass('video-selected');
        });</code>

.currentTarget と .target

イベント処理をよりよく理解するには、event.currentTarget の違いに注意することが重要です。そして、event.target.

• event.currentTarget: イベント リスナーがアタッチされる要素を表します。
• event.target: 最初にイベントをトリガーした要素を表します。

イベント バブリングのコンテキストでは、event.currentTarget は伝播プロセス全体を通じて同じままですが、event.target は現在処理している要素に応じて変化します。

結論

アロー関数は JavaScript で簡潔な構文を提供しますが、イベント ハンドラー内で "this" を操作する場合は、その固有のスコープ動作を覚えておくことが重要です。 event.currentTarget を活用することで、開発者は適切な DOM 要素に一貫してアクセスし、JavaScript アプリケーションでイベントを効果的に処理できます。

以上がイベント ハンドラー内のアロー関数で「this」の動作が異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。