在使用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中文網其他相關文章!