菜菜菜的前端學習日誌 - Day21

昨天介紹了event的幾種寫法，及點擊事件的觸發效果

接下來再介紹其他也會用到的event事件吧

onchange

onchange事件就是用在<select>標籤裡的值改變時，會觸發事件去執行程式碼。

<select id="handsomeBoy7st" onchange="showHandsomeBoy()">
  <option value ="Arel">Arel</option>
  <option value ="Andy">Andy</option>
  <option value ="Jim">Jim</option>
  <option value ="Kevin">Kevin</option>
  <option value ="X">X</option>
</select>
<script>
    function showHandsomeBoy(){
      var who = document.getElementById("handsomeBoy7st").value;
      alert(`Hello!! I'm ${who}`);
    }
</script>

觸發的效果如下

onmouseover/onmouseout

onmouseover及onmouseout他的事件觸發效果跟CSS裡面的:hover是相似的，不同的是onmouseover及onmouseout是2個事件，只會在游標移過去或是游標移開時執行，如果想產生:hover的效果就必須2個事件都寫。

我們就練習一下mouseover的事件

<h1 id="change" onmouseover="changeColor()">Hello!! My name is Andy!!</h1>

<script>
function changeColor(){
  document.getElementById("change").style.color="blue";
}
</script>

就像這樣，當滑鼠游標移過去時h1顏色就變成了藍色

mouseout的方法是一樣的就不做練習囉

onfocus/onblur

onfocus用在input上，當使用者focus在input標籤上時，就會觸發事件執行程式。

onblur跟onfocus不一樣的是當使用者不再focus在input標籤上時會觸發事件執行程式

以下就來練習一下吧

<input type="text" id="hey" onfocus="borderChange()" onblur="borderRestore()">

<script>
    
function borderChange(){
  document.getElementById("hey").style.border = "5px solid green"
}

function borderRestore(){
  document.getElementById("hey").style.border = "1px solid #e0e0e0"
}
</script>

當我focus在input標籤上時就會加上boder的屬性，blur時就會回到原本狀態，效果就會像是以下這樣。

onscroll

onscrolll就是捲軸滾動時會觸發事件去執行程式，可設置在所有有捲軸屬性的元素上。

來練習一下吧，我們設了一個寬200px、高300px的容器

我們裡面塞了很多文字，然後設定超過容器高度時會產生捲軸，不讓文字超過容器
再來就可以來試驗捲軸事件了

<div id="content" onscroll="borderChange()">
  <p>Hello!!</p>
  <p>Hello!!</p>
  <p>Hello!!</p>
  <p>Hello!!</p>
  <p>Hello!!</p>
  <p>Hello!!</p>
  <p>Hello!!</p>
  <p>Hello!!</p>
  <p>Hello!!</p>
  <p>Hello!!</p>
</div>
<style>
    #content{
      width: 200px;
      height: 300px;
      border: 1px solid black;
      overflow: scroll;
    }
</style>
<script>
    function borderChange(){
      document.getElementById("content").style.border = "5px solid green";
    }
</script>

效果就是像這樣，我們讓他的onscroll事件觸發時執行border屬性的改變。

onload

onload就是能夠設定能在頁面載入完成時會觸發事件去執行程式

現在的網路速度已經比以前快了許多，但也是有少數用戶網路速度不是那麼快，以及智慧型手機及平板電腦等行動裝置越來越普及，網路連線速度也或許沒那麼快，就有可能造成有些網頁的動畫效果在頁面載入不全之下，產生了很詭異的效果，又或是其他因網路速度緩慢造成的不良體驗。

為避免產生上述情況，會讓頁面確定載入完成時再去執行某些動作，這時就會用到onload事件，可以將此事件寫在你需要確保載入完成時才執行動作的元素上。

onunload

而onunload是當使用者離開頁面時會觸發的事件，經常使用在像是會員註冊或修改資料時，使用者尚未將修改資料儲存就要離開頁面時會提醒使用者資料尚未儲存。

或是在玩網頁遊戲要離開頁面時也會跳出提醒哈哈