Day7 Javascript事件

2022 iThome 鐵人賽

DAY 7

Modern Web

Javascripts惡補小教室系列第 7 篇

14th鐵人賽

karta1366796

團隊imac_柬埔寨7日遊

2022-09-22 12:27:53

612 瀏覽

分享至

在前面的文章中，我們有看到onclick，但沒有實際說明，而今天讓我們一起看看到底甚麼是Javascipt事件吧! 讓我們舉一些平常在瀏覽網頁時，就會使用到的例子，像是當一個購物網站，點加入購物車按鈕時，會跳出已加入成功的通知，或是把鼠標移到圖片上，會有放大的效果、及一開啟網頁，就有討人厭的蓋板廣告，其實onclick是發生在html元素(按鈕button)的事情，可以透過Javascript去處理這些事件，達到我們要的效果。

這邊舉一個簡單的例子，當按鈕按下時顯示當前時間。

  <body>
    現在時間是
    <div id="demo"></div>
    <button type="button" onclick="btn()">按鈕</button>
    <script>
      function btn() {
        document.getElementById("demo").innerHTML = Date();
      }
    </script>
  </body>

當按鈕按下時(Html事件)，調用Javascript函數，執行函數裡要做的事情。

則Html事件就只有按鈕按下(onclick)而已嗎?

Html事件

onclick事件-使用者點擊Html元素。
onchange事件-Html元素改變。
onkeydown事件-使用者按下鍵盤按鍵。
onload事件-當瀏覽器加載頁面完成。
onmouseover事件-當鼠標滑到Html元素上。
onmouseout事件-當鼠標移開Html元素上。

onchange

  <body>
    <p id="text">段落變色</p>
    <div>
      <select name="" id="" onchange="colorChange(value)">
        <option value="1">選項一</option>
        <option value="2">選項二</option>
        <option value="3">選項三</option>
      </select>
    </div>
    <button type="button" class="btn" onclick="btn()">按鈕</button>
    <script>
      function colorChange(a) {
        if (a == 1) document.getElementById("text").style.color = "red";
        else if (a == 2) document.getElementById("text").style.color = "blue";
        else document.getElementById("text").style.color = "yellow";
      }
    </script>
  </body>

當select選項改變(onchange)時，就會更改段落的顏色。

onkeydown

  <body>
    <input type="text" id="inputDemo" />
    <button type="button" class="btn" onclick="btn()">按鈕</button>
    <script>
      function btn() {
        alert("按鈕按下");
      }
      const input = document.getElementById("inputDemo");
      input.addEventListener("keypress", function (event) {
        if (event.key === "Enter") {
          event.preventDefault();
          btn();
        }
      });
    </script>
  </body>

當按下Enter，或是按下按鈕時觸發btn函數，監聽keypress按下事件(按下enter)。

oonmouseover、onmouserout

  <body>
    <img
      src="https://fakeimg.pl/250x100/"
      onmouseover="big(this)"
      onmouseout="normal(this)"
      alt=""
    />

    <script>
      function big(a) {
        a.style.height = "300px";
        a.style.width = "400px";
      }

      function normal(a) {
        a.style.height = "100px";
        a.style.width = "250px";
      }
    </script>
  </body>

當鼠標滑到圖片上時圖片放大，移出時回到原本的尺寸!

今天我們簡單介紹了各種事件，透過Javascript我們可以抓取這些Html事件要執行哪些動作，調用函數。明天我們將繼續介紹儲存的好朋友陣列!