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

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

箭頭函數和詞法作用域存取預期元素的解決方案

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

事件監聽器和 event.currentTarget

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

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

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

在箭頭函數中使用 event.currentTarget

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

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');
});

.currentTarget 與 .target

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

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

結論

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