Event（事件）是什麼？

Event 就是「網頁上發生的事情」，例如：

• 使用者點擊按鈕
• 使用者輸入文字
• 滑鼠移到某個元素上
• 頁面載入完成

簡單說：只要使用者做了什麼動作，瀏覽器就會產生一個「事件」

為什麼要用 Event？

想像你開了一間早餐店：

客人按了門鈴 → 你要去開門
客人喊「老闆」 → 你要過去點餐

如果沒有「事件」機制，你就得一直盯著門口、一直聽有沒有人叫你，這樣很浪費力氣。
有了 event，你可以說：「只要門鈴響了，就執行『開門』這個動作」，平常你可以去做別的事，事件發生時瀏覽器會自動通知你。
這就是 JavaScript 常說的 「event-driven（事件驅動）」：程式不是從頭到尾照順序跑，而是「等事情發生才反應」

基本語法：addEventListener

元素.addEventListener("事件名稱", function () {
  // 事件發生時要做的事
});

情境範例：早餐店點餐按鈕

//HTML: <input type="button" class="orderBtn" value="Click Me">

const orderButton = document.querySelector(".orderBtn");
orderButton.addEventListener("click", function () {
  alert("老闆，我要一份蛋餅！");
  // 按下按鈕會跳出 老闆，我要一份蛋餅！的提示訊息
});

範例:便利商店輸入金額

HTML:<input type="text" class="money" placeholder="請輸入金額">
     <input type="button" class="payBtn" value="Click Me">
  
const input = document.querySelector(".money");
const button = document.querySelector(".payBtn");

//綁定監聽事件
button.addEventListener("click", function (e) { //click是事件名稱,function是執行函式
const amount = input.value; // 拿到使用者輸入的值
alert("客人付了：" + amount + " 元");
// 輸入100後，按下按鈕會跳出 客人付了：100 元 的提示訊息
});

流程就像：
客人在輸入框打「100」（這是資料，還沒觸發事件）
客人按下「結帳」按鈕 → 觸發 click 事件
瀏覽器執行你寫好的 function，去讀取輸入框的值並顯示出來

點擊按鈕後，觸發修改文字之行為
例一

HTML: <input type="button" class="payBtn" value="Click Me">
      <h1 class="title">點擊</h1>
  
const title = document.querySelector(".title");
const button = document.querySelector(".payBtn");

button.addEventListener("click", function (e) {
    title.textContent = "按鈕已點擊";
    //修改title文字
})

例二 加減器

//HTML
  <input type="button" class="button1" value="加">
  <input type="button" class="button2" value="減">
  <h1 class="title">0</h1>
  
  const title = document.querySelector(".title");
const button1 = document.querySelector(".button1");
const button2 = document.querySelector(".button2");

let count = 0;
button1.addEventListener("click", function (e) {
    count += 1;
    title.textContent = count;
})
button2.addEventListener("click", function (e) {
    count -= 1;
    title.textContent = count;
})

function(e)括號裡的e --就是會把當下點擊的資料的所有詳細參數紀錄

常用的 Event 種類