您了解事件物件（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。