為什麼事件處理程序中的箭頭函數中的「this」行為不同？

事件處理程序中的箭頭函數和「this」綁定

使用JavaScript 的ES6 箭頭函數時，開發人員在依賴時可能會遇到意外行為事件處理程序中的「this」關鍵字。與傳統函數表達式不同，箭頭函數從其周圍範圍繼承 this 上下文，而不是從呼叫它們的上下文繼承。

問題：未定義$(this)

在提供的程式碼片段中，箭頭函數方法將「this」綁定到全域上下文（視窗物件），而不是附加到事件偵聽器的預期元素。結果，$(this) 傳回 undefined，因為全域上下文中沒有對應的 jQuery 物件。

解決方案：使用 event.currentTarget

來解決此問題並取得正確的元素引用，建議在事件處理程序中使用 event.currentTarget。與「this」不同，event.currentTarget 總是會引用事件偵聽器目前正在處理的 DOM 元素。

使用event.currentTarget 的範例

這裡是修改後的程式碼片段使用event.currentTarget 修正：

. currentTarget 與.target

為了更好地理解事件處理，重要的是要注意event.currentTarget 之間的區別和event.target。

• event.currentTarget: 表示事件監聽器附加到的元素。
• event.target: 表示最初觸發事件的元素。

在事件冒泡的上下文中，event.currentTarget 在整個傳播過程中保持不變，而event.target 根據當前正在處理的元素而變化

結論

箭頭函數在JavaScript 中提供了簡潔的語法，但在事件處理程序中使用「this」時，記住它們獨特的作用域行為至關重要。透過利用 event.currentTarget，開發人員可以一致地存取適當的 DOM 元素並有效地處理 JavaScript 應用程式中的事件。

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