為什麼在 JavaScript 事件處理程序的箭頭函數中使用“event.currentTarget”而不是“this”？

箭頭函數中的this：事件處理程序注意事項

在使用JavaScript 時，開發人員在事件處理程序中使用箭頭函數時可能會遇到挑戰。預設情況下，當在事件回調中使用箭頭函數時，取得它來表示事件處理程序綁定到的元素會出現問題。出現這種情況是因為箭頭函數中 this 的值是在其定義期間而不是在使用時確定的。

要解決此問題，建議在使用箭頭函數時使用 event.currentTarget 而不是 this在回呼中。 event.currentTarget 一致地指定與目前正在執行的事件監聽器關聯的 DOM 元素，確保可以準確引用所需的元素。

理解 .currentTarget

event.currentTarget 的使用源自於事件捕捉和冒泡的概念。了解這些機制對於在 JavaScript 中有效地處理事件至關重要。

• event.currentTarget 表示定義事件偵聽器的元素，稱為事件目標。
• event.target 表示最初觸發事件的元素。

事件冒泡和捕獲

期間事件傳播、瀏覽器行為可能會受到事件捕獲和冒泡的使用的影響。兩者都涉及 DOM 樹內的事件流，但方向不同。

• 事件冒泡：事件在 DOM 樹中向上移動，從目標元素到文件的根。
• 事件擷取：事件沿著 DOM 樹向下移動，從文件的根到目標元素。

在事件處理的脈絡中，事件之間的差異currentTarget和target變得明顯。當事件委託給父元素並在子元素上觸發事件時，currentTarget 仍然是父元素，而 target 引用子元素。在處理附加事件偵聽器後動態建立或插入 DOM 中的元素時，這種差異變得尤為重要。

範例：區分.currentTarget 和.target

考慮下面的程式碼片段：

<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中文網其他相關文章！