你了解事件物件（Event Object）嗎?

當任何的事件發生時，瀏覽器就會為這個事件創造一個物件，我們稱為事件物件（Event object）。它會提供的額外資訊，依照事件類型的不同，會帶有不同的資料。在下方程式碼中，事件物件會以參數的形式傳給我們。

HTML

<div>
  <input id="Btn" type="button" value="我是按鈕">
</div>

JavaScript

document.querySelector('#Btn').addEventListener('click', (e) => {
  // e: 本身包含了所有事件共同的屬性及方法
  console.log(e); 
});

type

回傳一個代表此事件物件類型的字串。

HTML

<div>
  <input id="Btn" type="button" value="我是按鈕">
</div>

JavaScript

document.querySelector('#Btn').addEventListener('click', (e) => {
  // type: click
  console.log('type: ', e.type); 
});

target 與 currentTarget

以下將觸發的對象改為 <div>。

HTML

<div id="Box">
  <input type="button" value="我是按鈕">
</div>

JavaScript

document.querySelector('#Box').addEventListener('click', (e) => {
  // 指向觸發的 DOM 物件，也就是 <input>
  console.log('target: ', e.target);

  // 指向監聽的 DOM 物件，也就是 <div>
  console.log('currentTarget: ', e.currentTarget); 
});

nodeName 與 tagName

如果只是處理元素，那麼使用 tagName 和 nodeName 沒有差別。

HTML

<div>
  <input id="Btn" type="button" value="我是按鈕">
</div>

JavaScript

document.querySelector('#Btn').addEventListener('click', (e) => {
  // tagName: INPUT
  console.log('tagName:', e.target.tagName);

  // nodeName: INPUT
  console.log('nodeName:', e.target.nodeName);
});

與上述的結果一樣沒有差別。

// tagName: INPUT
console.log('tagName:', document.querySelector('#Btn').tagName);

// nodeName: INPUT
console.log('nodeName:', document.querySelector('#Btn').nodeName);

若對象不是元素，就有差異性了。

// tagName: undefined
console.log('tagName:', document.tagName);

// nodeName: #document
console.log('nodeName:', document.nodeName);

總結

tabName 只能用在元素節點上，而 nodeName 可以用在任何節點上，可以說 nodeName 涵蓋了 tagName，並且更具有更多的功能，因此，建議使用 nodeName。