關於 event(e)

以前還蠻陌生的東西。

簡述

瀏覽器在幫我們呼叫 callback function 時，他會傳入一個參數：event

這裡面會放很多跟事件有關的東西，例如說：

const btn = document.querySelector('.btn')
// event 只是個參數，所以你想取什麼名字都行
// 例如：function(yoyoyo) 也是 OK 的
btn.addEventListener('click', function(event) {
  console.log(event)
})

Output：

// PointerEvent 
{
  isTrusted: true
  altKey: false
  altitudeAngle: 1.5707963267948966
  azimuthAngle: 0
  bubbles: true
  button: 0
  buttons: 0
  cancelBubble: false
  cancelable: true
  ...
}

有點抽象的話可以想成這樣子：

const btn = document.querySelector('.btn')
btn.addEventListener('click', onClick)

function onClick(event) {
  console.log(event)
}

// 瀏覽器呼叫 callback function 的時候
onClick({
  isTrusted: true
  altKey: false
  altitudeAngle: 1.5707963267948966
  azimuthAngle: 0
  bubbles: true
  button: 0
  buttons: 0
  cancelBubble: false
  cancelable: true
  ...
})

event.target

這是最常用到的一個東西，用來告訴你「是哪一個元素觸發事件（最直接的那個）」

沿用剛剛的例子：

const btn = document.querySelector('button')
btn.addEventListener('click', function(event) {
  console.log(event.target)
})

Output：

<button>Click me</button>