e.target 和 e.currentTarget 的區別

e.target vs e.currentTarget

這兩個屬性都是事件物件（Event）上的屬性，常在事件委派時容易搞混。

屬性	指向
e.target	實際觸發事件的元素（使用者點擊的那個）
e.currentTarget	目前正在執行監聽器的元素（事件被綁定的那個）

範例說明

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
</ul>

document.getElementById('list').addEventListener('click', (e) => {
  console.log('e.target:', e.target);         // <li>item 1</li>（被點的那個）
  console.log('e.currentTarget:', e.currentTarget); // <ul id="list">（綁定監聽器的）
});

當使用者點擊 <li>item 1</li>：

• e.target → <li> （實際被點擊的元素）
• e.currentTarget → <ul> （監聽器所在的元素）

什麼時候相同？

當監聽器就直接綁在被點擊的元素上時，兩者相同：

const btn = document.getElementById('btn');
btn.addEventListener('click', (e) => {
  console.log(e.target === e.currentTarget); // true
});

實務應用：事件委派中的判斷

document.getElementById('list').addEventListener('click', (e) => {
  // 用 e.target 判斷使用者真正點的是哪個子元素
  if (e.target.matches('li')) {
    console.log('點擊了 li：', e.target.textContent);
  }
});

補充：this 在非箭頭函式中

在傳統 function 監聽器中，this 等同於 e.currentTarget（即綁定監聽器的元素）；但箭頭函式沒有自己的 this，請用 e.currentTarget 取代。

總結

• e.target ＝ 事件的源頭（使用者操作的元素）
• e.currentTarget ＝ 監聽器掛載的元素（冒泡路徑上的某個祖先）
• 在事件委派中，幾乎都是用 e.target 來判斷是哪個子元素被觸發