JavaScript 中用作事件處理程序的箭頭函數中的「this」如何表現？

Javascript - 箭頭函數在事件處理程序中

在ES6 中，有一個新的箭頭函數概念，它提供了簡潔明了的功能定義函數的方法。但是，當在事件處理程序中使用箭頭函數作為回調時，理解其行為變得至關重要。

問題

在提供的程式碼中，一個事件。未使用 currentTarget 屬性，點選元素時箭頭函數傳回 undefined。

箭頭函數中的this

與常規函數不同，裡面的this 值箭頭函數是由定義箭頭函數的位置決定的，而不是由使用它的位置決定的。在提供的範例中，箭頭函數是在較大函數的上下文中定義的，這可能會導致意外行為。

解決方案

解決此問題問題，而不是訪問 this，應該使用 event.currentTarget 來獲取處理程序綁定到的元素。 event.currentTarget 總是會引用其 EventListeners 目前正在處理的 DOM 元素。以下是修改程式碼的方法：

<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 在事件冒泡和捕獲的上下文中。

• currentTarget：表示附加了事件偵聽器的元素。
• target ：表示觸發事件的元素。

在處理巢狀元素和事件傳播時，使用 event.currentTarget 可確保始終引用正確的元素。

< ;h3>範例

提供的程式碼片段示範了 this、event.currentTarget 和 event.target 之間的差異。透過點選不同的元素，輸出會顯示每個屬性的值如何根據觸發的元素和事件偵聽器的上下文而變化。

以上是JavaScript 中用作事件處理程序的箭頭函數中的「this」如何表現？的詳細內容。更多資訊請關注PHP中文網其他相關文章！