JavaScript 事件處理：「currentTarget」和「target」有什麼不同？

JavaScript：揭示事件處理中 CurrentTarget 和 Target 屬性之間的區別

在 JavaScript 事件處理領域，currentTarget 和 target屬性在理解事件傳播方面發揮不同的作用

定義：

• 目標： 表示發起事件的直接元素。這通常是觸發操作起源的元素，例如單擊或懸停。
• currentTarget: 指附加事件偵聽器的元素。它指示事件冒泡路徑中的當前元素。

事件冒泡和捕獲：
事件遵循 JavaScript 中的預設冒泡行為。這意味著在內部元素上觸發的事件將在 DOM 樹中向上傳播（冒泡）到其祖先。

屬性的作用：
在事件傳播期間，currentTarget 和target提供有價值的信息：

• 目標：標識最初的元素引發事件，無論傳播階段為何。
• currentTarget: 隨著事件在 DOM 層次結構中向上冒泡而動態更新。它指向目前正在處理事件偵聽器的元素。

場景和用例：

• 事件傳播控制：

  • 透過捕獲事件在父元素（事件捕獲）中，currentTarget將始終引用父元素，而target將指示觸發事件的子元素。
  • 透過將事件冒泡到文件物件（事件冒泡）， currentTarget 和 target 在整個傳播過程中都會與相同元素對齊。

• 元素隔離：

  • 使用currentTarget，可以透過將偵聽器附加到其父元素來將事件處理隔離到特定元素。發起事件的元素仍然可以透過目標屬性來識別。

範例：

const parent = document.querySelector(".parent");
parent.addEventListener("click", (event) => {
  console.log("currentTarget:", event.currentTarget); // Parent element
  console.log("target:", event.target); // Clicked child element
});

以上是JavaScript 事件處理：「currentTarget」和「target」有什麼不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！