JavaScript - アロー関数とイベント ハンドラー

イベント ハンドラーのコールバックとしてアロー関数を使用する場合、関数内の this の値は予期せぬものになります。このブログ投稿では、この動作の背後にある理由を説明し、event.currentTarget.

アロー関数と語彙スコープ

を使用して目的の要素にアクセスするための解決策を提供します。通常の関数とは異なり、アロー関数にはこれに関する独自のコンテキストまたは範囲。代わりに、周囲のコンテキストの語彙範囲を継承します。示されている例では、アロー関数は dom.videoLinks のクリック イベント ハンドラー内で定義されています。したがって、アロー関数内の this は、dom.videoLinks 要素を参照します。

Event Listeners およびevent.currentTarget

Event リスナーは、特定の要素にアタッチされ、特定のイベントが発生したときに実行されます。イベントがトリガーされると、イベント オブジェクトには、イベントをトリガーしたターゲット要素と、イベント リスナーがアタッチされている現在のターゲット要素に関する情報が含まれます。

event.target プロパティは、イベントをトリガーしたターゲット要素を直接参照します。イベントを引き起こした。ほとんどの場合、これは、クリックされたか、マウスを上に置いたか、またはフォーカスを受け取った要素です。

一方、event.currentTarget プロパティは、イベント リスナーがアタッチされている要素を参照します。これは、実行時にイベントが処理される要素です。

アロー関数でのevent.currentTargetの使用

アロー関数イベント ハンドラー内の目的の要素にアクセスするには、eventを使用します。これの代わりに .currentTarget を使用します。コードの修正版は次のとおりです:

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');
});

.currentTarget と .target

一般に、イベント ハンドラーを使用する場合は、event.target よりもevent.currentTarget を使用する必要があります。これは、イベントが DOM ツリー内でバブルアップしたりキャプチャダウンしたりする可能性があり、event.target を使用すると、対象としている要素を常に参照するとは限らないためです。

event.currentTarget は一貫してイベント リスナーを持つ要素を参照します。

結論

イベント ハンドラーでアロー関数を使用する場合は、event.currentTarget を使用して目的の要素にアクセスすることを忘れないでください。イベントのバブリングとキャプチャを操作するときは、正確なイベント処理を保証するために、event.target とevent.currentTarget の区別に留意してください。