イベント処理内のアロー関数で「this」が期待どおりに動作しないのはなぜですか?

JavaScript のイベント処理によるアロー関数の動作を理解する

イベント処理でアロー関数をコールバックとして利用する場合、次のことを考慮することが重要です。これとevent.currentTargetの違い。アロー関数では、これは関数が使用される場所ではなく、関数が定義されるコンテキストを指します。したがって、ハンドラーがバインドされている要素にアクセスするには、代わりにevent.currentTargetを使用する必要があります。

event.currentTargetとevent.targetの区別

event.currentTarget とevent.target の違いを理解することは、イベントのバブリングとキャプチャにおいて重要です。 event.currentTarget はイベント リスナーがアタッチされている要素を表し、event.target は最初にイベントをトリガーした要素を表します。

ドキュメントによると、「EventTarget 型の currentTarget、読み取り専用。EventTarget を示すために使用されます」 EventListener が現在処理されています。これは、キャプチャおよびバブリング中に特に役立ちます。

例: バブリングおよびキャプチャによるイベントの伝播

指定されたコード スニペット内

<code class="javascript">var parent = document.getElementById('parent');
parent.addEventListener('click', function(e) {

  document.getElementById('msg').innerHTML = "this: " + this.id +
    "<br> currentTarget: " + e.currentTarget.id +
    "<br>target: " + e.target.id;
});

$('#parent').on('click', function(e) {

  $('#jQmsg').html("*jQuery<br>this: " + $(this).prop('id')
                   + "<br>currenTarget: " + $(e.currentTarget).prop('id') 
                   + "<br>target: " + $(e.target).prop('id'));
});

$('#parent').on('click', e => $('#arrmsg').html('*Arrow function <br> currentTarget: ' + e.currentTarget.id));</code>

イベントが発生すると、ターゲット要素から開始してツリーをルートまで移動して、DOM を介して伝播します。このプロセス中、event.target は各レベルでイベントをトリガーした要素を示し、event.currentTarget はイベント リスナーがアタッチされている要素を表します。

アロー関数でイベントを適切に処理するには、this とevent.currentTarget の違いを理解することが不可欠です。 event.currentTarget を使用すると、アロー関数が定義されているコンテキストに関係なく、イベント リスナーに関連付けられた要素にアクセスできます。

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