甚麼是事件

網頁互動的核心就是事件，使用者點擊按鈕、移動滑鼠、輸入文字，甚至是頁面載入完成，這些都是事件
在JavaScript裡，我們可以用addEventListener來監聽使用者做了什麼

語法：element.addEventListener('事件名稱', callback);

事件名稱：
click：點擊
input：輸入內容時
keydown / keyup：鍵盤按下 / 放開
submit：表單送出
mouseover / mouseout：滑鼠移入 / 移出

簡單範例：點擊按鈕

<button id="myBtn">點我！</button>

<script>
  const btn = document.querySelector('#myBtn');

  btn.addEventListener('click', () => {
    alert('你點了按鈕！');
  });
</script>

事件物件 (event object)

當事件觸發時，JavaScript 會自動傳入一個「事件物件」，通常命名為e或event，它包含了事件的相關資訊

範例：

<input type="text" id="myInput" placeholder="輸入一些字">

<script>
  const input = document.querySelector('#myInput');

  input.addEventListener('input', (e) => {
    console.log(e.target.value); // 使用者目前輸入的值
  });
</script>

e也有自己的屬性
e.target → 觸發事件的元素
e.type → 事件類型（ex:click、input）
e.key → 當鍵盤事件發生時，代表按下的鍵
e.preventDefault() → 阻止瀏覽器的預設行為（例如表單送出後刷新頁面）

小練習：鍵盤偵測

<input type="text" id="keyboardInput" placeholder="隨便打點字">
<p id="message"></p>

<script>
  const input = document.querySelector('#keyboardInput');
  const message = document.querySelector('#message');

  input.addEventListener('keydown', (e) => {
    message.textContent = `你剛剛按下了：${e.key}`;
  });
</script>

整理一下今天的部分就是:addEventListener是監聽事件的主要方法，事件物件event包含了觸發事件的詳細資訊，而preventDefault()可以攔截瀏覽器的預設動作