Day 10 ： JavaScript 「事件處理」讓網頁與使用者互動

16th鐵人賽

tsou3636

2024-09-24 23:51:11

80 瀏覽

分享至

在網頁開發中，互動性是提升使用者體驗的重要一環。而這些互動的背後，就是由 事件（event） 來觸發的。JavaScript 中的事件處理讓開發者能夠監聽使用者的操作，例如點擊、滑鼠移動、鍵盤輸入等，並根據這些操作執行特定的行為。

今天，將深入探討 JavaScript 的事件處理機制，並通過範例來展示如何使用事件讓網頁變得更有互動性。

1. 什麼是事件？

事件是用來描述使用者或瀏覽器發生的一些行為，例如按下按鈕、提交表單、滾動頁面等。當這些事件發生時，就會使用 JavaScript 來監聽並響應它們。

常見的事件類型有：
＊ click：使用者點擊元素。
＊ mouseover：滑鼠移動到某個元素上。
＊ keydown：按下鍵盤上的某個按鍵。
＊ submit：提交表單時觸發。

2. 如何監聽事件

可以使用 addEventListener() 方法來監聽事件，並在事件發生時執行特定的程式碼。

監聽按鈕點擊
以下是一個簡單的例子，展示如何監聽按鈕的點擊事件：

<!DOCTYPE html>
<html>
<head>
    <title>事件處理範例</title>
</head>
<body>
    <button id="myButton">點擊我</button>

    <script>
        let button = document.getElementById("myButton");
        button.addEventListener("click", function() {
            alert("按鈕被點擊了！");
        });
    </script>
</body>
</html>

在以上的例子中，當使用者點擊按鈕時，網頁會彈出一個提示框，顯示「按鈕被點擊了」。

3. 常見事件處理範例

3.1 監聽滑鼠移動
監聽滑鼠的 mouseover 事件，當滑鼠移動到某個元素上時觸發事件：

<p id="text">將滑鼠移動到這裡！</p>

<script>
    let text = document.getElementById("text");
    text.addEventListener("mouseover", function() {
        text.style.color = "red";
    });
</script>

當滑鼠移到段落文字上時，文字顏色會變成紅色。

3.2 表單驗證
當使用者提交表單時，就使用 submit 事件來進行資料驗證：

<form id="myForm">
    <input type="text" id="name" placeholder="輸入你的名字">
    <button type="submit">提交</button>
</form>

<script>
    let form = document.getElementById("myForm");
    form.addEventListener("submit", function(event) {
        let nameInput = document.getElementById("name");
        if (nameInput.value === "") {
            alert("名字不能為空！");
            event.preventDefault(); // 阻止表單提交
        }
    });
</script>

這段程式碼會檢查使用者是否在提交表單前輸入了名字，如果沒輸入，會顯示警告並阻止表單提交。

4. 移除事件監聽

有時候，可能會需要在特定條件下移除事件監聽，這可以使用 removeEventListener() 方法來實現。

<button id="stopButton">停止監聽點擊</button>

<script>
    function showAlert() {
        alert("你點擊了按鈕！");
    }

    let stopButton = document.getElementById("stopButton");
    stopButton.addEventListener("click", showAlert);

    // 3秒後移除事件監聽
    setTimeout(function() {
        stopButton.removeEventListener("click", showAlert);
        alert("事件監聽已移除");
    }, 3000);
</script>

這個範例展示了如何在 3 秒後移除對按鈕的 click 事件監聽。

5. 事件物件

當事件觸發時，JavaScript 會自動傳遞一個 事件物件 給事件處理函式。這個物件包含了與事件相關的詳細資料，例如發生的時間、目標元素等。

檢查點擊的位置

<button id="positionButton">點擊我，看看點擊位置</button>

<script>
    let positionButton = document.getElementById("positionButton");
    positionButton.addEventListener("click", function(event) {
        console.log("點擊位置：X=" + event.clientX + ", Y=" + event.clientY);
    });
</script>

這個範例中，利用 event 物件來獲取使用者點擊的位置（相對於視窗的 X 和 Y 座標）。