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

區分JavaScript 事件中的currentTarget 和target 屬性

在JavaScript 中處理事件時，了解currentTarget 和target 之間的差異

在JavaScript 中處理事件時，了解currentTarget 和target 之間的區別至關重要特性。這些屬性為事件傳播機制提供了寶貴的見解，並在各種場景中發揮至關重要的作用。

事件傳播和屬性差異

預設情況下，JavaScript 中的事件遵循冒泡傳播模型。這意味著事件源自於特定元素並透過其父元素向上傳播，直到到達文件物件。在此傳播過程中，target 屬性指的是最初觸發事件的元素，而 currentTarget 屬性則標識事件偵聽器附加到的元素。

範例

考慮一個包含兩個巢狀 div 的 HTML文件：

<div>

現在，我們將一個事件偵聽器附加到外部div:

document.getElementById("div-container").addEventListener("click", function(event) {
  console.log(`Target: ${event.target.id}, CurrentTarget: ${event.currentTarget.id}`);
});

如果我們點擊內層div，target和currentTarget屬性都會輸出「div- inner”，表示事件源自內層div。然而，如果我們點擊外層div，currentTarget屬性仍然會輸出“div-container”，因為事件監聽器附加在外層div上，而target屬性將為null，因為點擊事件不是直接在外層觸發的div.

用例

使用目標：

• 辨識導致事件的特定元素
• 將事件處理限制為嵌套結構中的特定元素
• 確定元素在頁面

的用途currentTarget:

• 確定事件偵聽器附加到的元素
• 透過停止進一步冒泡或捕獲其他事件來控制事件傳播
• 實現事件委託用於使用單一事件偵聽器處理多個元素上的事件

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