JavaScript進階之事件

乘風而歸發表於2017-09-24
JavaScript事件

1.什麼是事件

JavaScript 建立動態頁面。事件是可以被 JavaScript 偵測到的行為。 網頁中的每個元素都可以產生某些可以觸發 JavaScript 函式或程式的事件。
比如說，當使用者單擊按鈕或者提交表單資料時，就發生一個滑鼠單擊（onclick）事件，需要瀏覽器做出處理，返回給使用者一個結果。

主要事件表:
這裡寫圖片描述

2.滑鼠單擊事件( onclick ）

onclick是滑鼠單擊事件，當在網頁上單擊滑鼠時，就會發生該事件。同時onclick事件呼叫的程式塊就會被執行，通常與按鈕一起使用。

比如，我們單擊按鈕時，觸發 onclick 事件，並呼叫兩個數和的函式add2()。程式碼如下：

<html>
<head>
   <script type="text/javascript">
      function add2(){
        var numa,numb,sum;
        numa=6;
        numb=8;
        sum=numa+numb;
        document.write("兩數和為:"+sum);  }
   </script>
</head>
<body>
   <form>
      <input name="button" type="button" value="點選提交" onclick="add2()" />
   </form>
</body>
</html>

注意: 在網頁中，如使用事件，就在該元素中設定事件屬性。

3.滑鼠經過事件（onmouseover）

滑鼠經過事件，當滑鼠移到一個物件上時，該物件就觸發onmouseover事件，並執行onmouseover事件呼叫的程式。

現實滑鼠經過”確定”按鈕時，觸發onmouseover事件，呼叫函式info()，彈出訊息框，程式碼如下:
這裡寫圖片描述

執行結果:
這裡寫圖片描述

4.滑鼠移開事件（onmouseout）

滑鼠移開事件，當滑鼠移開當前物件時，執行onmouseout呼叫的程式。

當把滑鼠移動到”登入”按鈕上，然後再移開時，觸發onmouseout事件，呼叫函式message()，程式碼如下:
這裡寫圖片描述

執行結果:
這裡寫圖片描述

5.游標聚焦事件（onfocus）

當網頁中的物件獲得聚點時，執行onfocus呼叫的程式就會被執行。

如下程式碼, 當將游標移到文字框內時，即焦點在文字框內，觸發onfocus 事件，並呼叫函式message()。
這裡寫圖片描述

執行結果：
這裡寫圖片描述

6.失焦事件（onblur）

onblur事件與onfocus是相對事件，當游標離開當前獲得聚焦物件的時候，觸發onblur事件，同時執行被呼叫的程式。

如下程式碼, 網頁中有使用者和密碼兩個文字框。當前游標在使用者文字框內時（即焦點在文字框），在游標離開該文字框後（即失焦時），觸發onblur事件，並呼叫函式message()。
這裡寫圖片描述
執行結果：
這裡寫圖片描述

7.內容選中事件（onselect）

選中事件，當文字框或者文字域中的文字被選中時，觸發onselect事件，同時呼叫的程式就會被執行。

如下程式碼,當選中使用者文字框內的文字時，觸發onselect 事件，並呼叫函式message()。
這裡寫圖片描述

執行結果：
這裡寫圖片描述

8.文字框內容改變事件（onchange）

通過改變文字框的內容來觸發onchange事件，同時執行被呼叫的程式。

如下程式碼,當使用者將文字框內的文字改變後，彈出對話方塊“您改變了文字內容！”。
這裡寫圖片描述

執行結果：
這裡寫圖片描述

9.載入事件（onload）

事件會在頁面載入完成後，立即發生，同時執行被呼叫的程式。
注意：
1. 載入頁面時，觸發onload事件，事件寫在標籤內。
2. 此節的載入頁面，可理解為開啟一個新頁面時。
如下程式碼,當載入一個新頁面時，彈出對話方塊“載入中，請稍等…”。

這裡寫圖片描述

執行結果：

這裡寫圖片描述

10.解除安裝事件（onunload）

當使用者退出頁面時（頁面關閉、頁面重新整理等），觸發onUnload事件，同時執行被呼叫的程式。

注意：不同瀏覽器對onunload事件支援不同。

如下程式碼,當退出頁面時，彈出對話方塊“您確定離開該網頁嗎？”。
這裡寫圖片描述

執行結果：（IE瀏覽器）

這裡寫圖片描述

11.程式設計練習

使用JS完成一個簡單的計算器功能。實現2個輸入框中輸入整數後，點選第三個輸入框能給出2個整數的加減乘除。

提示：獲取元素的值設定和獲取方法為：例：賦值：document.getElementById(“id”）.value = 1； 取值：var = document.getElementById(“id”）.value；

任務
第一步： 建立構建運算函式count()。

第二步： 獲取兩個輸入框中的值和獲取選擇框的值。

提示：document.getElementById( id名 ).value 獲取或設定 id名的值。
第三步： 獲取通過下拉框來選擇的值來改變加減乘除的運演算法則。

提示：使用switch判斷運演算法則。
第四步： 通過 = 按鈕來呼叫建立的函式，得到結果。

注意: 使用parseInt()函式可解析一個字串,並返回一個整數。

<!DOCTYPE html>
<html>
 <head>
  <title> 事件</title>  
  <script type="text/javascript">
   function count(){
    var a=parseInt(document.getElementById("txt1") .value);
    //獲取第一個輸入框的值
    var b=parseInt(document.getElementById("txt2") .value);
    //獲取第二個輸入框的值
    var ab=document.getElementById("select") .value;
    //獲取選擇框的值
    //獲取通過下拉框來選擇的值來改變加減乘除的運演算法則
    var c=0;
    switch(ab){
    case "+":
        c=a+b;
        break;    
    case "-":
        c=a-b;
        break; 

    case "*":
        c=a*b;
        break;        

    case "/":
        c=a/b;
        break;        
    }
    document.getElementById("fruit").value = c;

    //設定結果輸入框的值 


   }
  </script> 
 </head> 
 <body>
   <input type='text' id='txt1' /> 
   <select id='select'>
        <option value='+'>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
   </select>
   <input type='text' id='txt2' /> 
   <input type='button' value=' = ' /> <!--通過 = 按鈕來呼叫建立的函式，得到結果--> 
   <input type='text' id='fruit' onclick="count()"/>   
 </body>
</html>

相關文章