在使用JavaScript 時，開發人員在事件處理程序中使用箭頭函數時可能會遇到挑戰。預設情況下，當在事件回調中使用箭頭函數時，取得它來表示事件處理程序綁定到的元素會出現問題。出現這種情況是因為箭頭函數中 this 的值是在其定義期間而不是在使用時確定的。
要解決此問題，建議在使用箭頭函數時使用 event.currentTarget 而不是 this在回呼中。 event.currentTarget 一致地指定與目前正在執行的事件監聽器關聯的 DOM 元素，確保可以準確引用所需的元素。
event.currentTarget 的使用源自於事件捕捉和冒泡的概念。了解這些機制對於在 JavaScript 中有效地處理事件至關重要。
期間事件傳播、瀏覽器行為可能會受到事件捕獲和冒泡的使用的影響。兩者都涉及 DOM 樹內的事件流，但方向不同。
在事件處理的脈絡中，事件之間的差異currentTarget和target變得明顯。當事件委託給父元素並在子元素上觸發事件時，currentTarget 仍然是父元素，而 target 引用子元素。在處理附加事件偵聽器後動態建立或插入 DOM 中的元素時，這種差異變得尤為重要。
考慮下面的程式碼片段：
<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>執行此程式碼片段時，按一下子元素或孫元素會觸發事件冒泡。下表示範了結果行為：
| Event Listener | this | currentTarget | target |
|---|---|---|---|
| function | child | parent | child/grand-child |
| jQuery | parent | parent | child/grand-child |
| Arrow function | undefined | parent | child/grand-child |
從表中可以明顯看出，當使用箭頭函數時，這會傳回 undefined，突出顯示需要使用 event.currentTarget 來取代。透過使用 event.currentTarget，始終可以在箭頭函數中引用正確的元素，從而確保 JavaScript 中有效的事件處理。
以上是為什麼在 JavaScript 事件處理程序的箭頭函數中使用'event.currentTarget”而不是'this”？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
