JavaScript 事件中的 currentTarget 與 target：有什麼不同？

JavaScript 事件中的currentTarget 與target：揭開差異

在JavaScript 事件處理領域，了解currentTarget 和target 之間的差異目標屬性至關重要。讓我們藉助範例來深入了解它們的差異。

探索目標屬性

目標屬性表示直接觸發事件的元素。考慮以下場景：

const button = document.querySelector('button');

button.addEventListener('click', (e) => {
  console.log(e.target); // Logs the button element clicked
});

在此範例中，當按一下按鈕時，e.target 將引用按鈕本身，因為它是啟動點擊事件的元素。

介紹currentTarget屬性

當target指向事件的發起者時，currentTarget表示事件處理程序附加到的元素。讓我們修改先前的程式碼：

const wrapper = document.querySelector('.wrapper');

wrapper.addEventListener('click', (e) => {
  console.log(e.currentTarget); // Logs the wrapper div
});

在這種情況下，e.currentTarget 將引用包裝器 div，即使點擊事件源自其中的按鈕。這是因為事件偵聽器附加到包裝器，使其成為控制元素。

選擇正確的屬性：基於場景的指南

• 在以下情況下使用目標：您需要訪問有關несоседдттвено 的元素元素的訊息引發事件。
• 在下列情況下使用 currentTarget： 您想要使用事件處理程序附加到的元素，無論事件源自於該元素層次結構中的哪個位置。

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