為什麼在事件處理程序中使用箭頭函數時「this」會出現意外行為？

JavaScript - 箭頭函數和事件處理程序

當使用箭頭函數作為事件處理程序的回調時，函數中的 this 值是意外的。這篇部落格文章解釋了此行為背後的原因，並提供了使用 event.currentTarget 存取預期元素的解決方案。

箭頭函數和詞法範圍

與常規函數不同，箭頭函數沒有自己的上下文或範圍。相反，它們繼承了周圍上下文的詞彙範圍。在提供的範例中，箭頭函數是在 dom.videoLinks 的按一下事件處理程序中定義的。因此，箭頭函數中的 this 指的是 dom.videoLinks 元素。

事件監聽器和 event.currentTarget

事件監聽器附加到特定元素，並在某些事件發生時執行。當事件被觸發時，事件物件包含有關觸發事件的目標元素以及附加了事件監聽器的當前目標元素的資訊。

event.target 屬性指的是直接觸發事件的元素觸發了該事件。在大多數情況下，這是被點擊、懸停或接收焦點的元素。

另一方面，event.currentTarget 屬性指的是附加了事件偵聽器的元素。這是執行時正在處理事件的元素。

在箭頭函數中使用 event.currentTarget

要存取箭頭函數事件處理程序中的預期元素，請使用 event .currentTarget 而不是這個。以下是程式碼的修改版本：

<code class="javascript">dom.videoLinks.click((e) => {
  e.preventDefault();
  console.log($(e.currentTarget));
  var self = $(e.currentTarget),
      url = self.attr(configuration.attribute);

  eventHandlers.showVideo(url);

  // Deactivate any active video thumbs
  dom.videoLinks.filter('.video-selected').removeClass('video-selected');

  // Activate selected video thumb
  self.addClass('video-selected');
});</code>

.currentTarget 與 .target

一般來說，在使用事件處理程序時，應該使用 event.currentTarget 而不是 event.target。這是因為事件可以在 DOM 樹中向上冒泡或向下捕獲，並且使用 event.target 可能不會總是引用您想要定位的元素。

event.currentTarget 總是會引用具有事件偵聽器的元素附加到它，無論事件流如何。

結論

在事件處理程序中使用箭頭函數時，請記得使用 event.currentTarget 存取預期元素。在處理事件冒泡和捕捉時，請記住 event.target 和 event.currentTarget 之間的區別，以確保準確的事件處理。

以上是為什麼在事件處理程序中使用箭頭函數時「this」會出現意外行為？的詳細內容。更多資訊請關注PHP中文網其他相關文章！