JavaScript でイベント ハンドラーとして使用されるアロー関数では、「this」はどのように動作しますか?

Javascript - イベント ハンドラー内のアロー関数

ES6 には、簡潔でクリーンなアロー関数の新しい概念があります。関数を定義する方法。ただし、イベント ハンドラーでアロー関数をコールバックとして使用する場合、この動作を理解することが重要になります。

問題

提供されたコードでは、イベントです。 currentTarget プロパティは使用されておらず、要素をクリックするとアロー関数は未定義を返します。

アロー関数の this

通常の関数とは異なり、 this の値は内部にあります。アロー関数は、アロー関数が使用される場所ではなく、アロー関数が定義される場所によって決まります。この例では、アロー関数がより大きな関数のコンテキストで定義されているため、予期しない動作が発生する可能性があります。

解決策

これに対処するにはこの問題を解決するには、これにアクセスする代わりに、event.currentTarget を使用して、ハンドラーがバインドされている要素を取得する必要があります。 events.currentTarget は常に、EventListeners が現在処理されている DOM 要素を参照します。コードの変更方法は次のとおりです。

<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

注意すべきもう 1 つの重要な違いは、event.currentTarget とevent の動作です。イベントのバブリングとキャプチャのコンテキストにおける .target。

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

ネストされた要素とイベントの伝播を処理する場合、event.currentTarget を使用すると、正しい要素が常に参照されるようになります。

< ;h3>例

提供されたスニペットは、this、event.currentTarget、event.target の違いを示しています。さまざまな要素をクリックすると、トリガーされた要素とイベント リスナーのコンテキストに基づいて各プロパティの値がどのように変化するかが出力に表示されます。

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