為什麼「this」在事件處理中的箭頭函數中的行為不符合預期？

了解JavaScript 中事件處理的箭頭函數行為

在事件處理中使用箭頭函數作為回調時，重要的是要考慮this 和event.currentTarget 之間的差異。在箭頭函數中，this 指的是定義函數的上下文，而不是使用函數的上下文。因此，要存取處理程序綁定的元素，需要使用 event.currentTarget 而不是 this。

event.currentTarget 和 event.target 的差異

理解 event.currentTarget 和 event.target 之間的差異對於事件冒泡和捕捉至關重要。 event.currentTarget 表示附加了事件監聽器的元素，而 event.target 表示最初觸發事件的元素。

根據文件：「currentTarget of type EventTarget, readonly。用於指示EventTarget目前正在處理其EventListener。這在捕獲和冒泡期間特別有用。」

範例：使用冒泡和捕獲進行事件傳播

在給定的程式碼片段中，在事件處理中使用this 和event.currentTarget 的區別如下：

<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 表示附加了事件監聽器的元素。

Summary

為了確保使用箭頭函數正確處理事件，必須了解 this 和 event.currentTarget 之間的差異。使用 event.currentTarget 可讓您存取與事件偵聽器關聯的元素，無論定義箭頭函數的上下文為何。

以上是為什麼「this」在事件處理中的箭頭函數中的行為不符合預期？的詳細內容。更多資訊請關注PHP中文網其他相關文章！