Day20 JavaScript 的事件處理

2024 iThome 鐵人賽

DAY 20

佛心分享-IT 人自學之術

原來程式語言一點都不難！跟著我30天java自學之路系列第 20 篇

16th鐵人賽

tomato5678

2024-10-04 20:28:58

15 瀏覽

分享至

在設計HTML網頁時，我們會用CSS來裝飾設計網頁，而一些與用戶互動的設計即是用JavaSccript來處理。

事件處理基礎

首先，我們要先了解甚麼是事件，事件是用戶與網頁交互時觸發的行為，比如點擊按鈕、按下鍵盤、鼠標移動等。JavaScript 允許你監聽這些事件，並作出對應的反應。
常見事件：
1.click：點擊事件
2.mouseover：鼠標移入事件
3.keydown：按鍵按下事件
4.submit：表單提交事件

事件監聽器
JavaScript 中可以使用 addEventListener() 來為某個元素註冊事件處理函式。當該事件被觸發時，瀏覽器會調用該函式。

事件冒泡與事件捕獲

事件在 DOM 中傳遞時，分為兩個階段
1.事件捕獲：從根節點向目標元素進行捕獲。
2.事件冒泡：從目標元素向上傳遞到根節點。

表單驗證

表單驗證是前端開發中非常重要的部分，能夠確保用戶輸入的數據符合指定規則。

簡單的驗證：
可以使用 JavaScript 驗證表單輸入的值，比如檢查是否為空、是否是有效的 email 或電話號碼格式等。

<!DOCTYPE html>
<html>
<head>
  <title>表單驗證範例</title>
</head>
<body>
  <form id="myForm">
    <label for="email">Email:</label>
    <input type="email" id="email" required>
    <button type="submit">提交</button>
    <p id="error" style="color: red;"></p>
  </form>

  <script>
    let form = document.getElementById("myForm");
    let emailInput = document.getElementById("email");
    let errorMsg = document.getElementById("error");

    // 當表單提交時進行驗證
    form.addEventListener("submit", function(event) {
      if (emailInput.value === "") {
        errorMsg.textContent = "Email 不能為空";
        event.preventDefault();  // 阻止表單提交
      } else {
        errorMsg.textContent = "";
      }
    });
  </script>
</body>
</html>