JavaScript 事件入門知識_javascript技巧

JavaScript事件是由訪問Web頁面的使用者引起的一系列操作;
例如:使用者點擊;當使用者執行某些操作的時候,再去執行一系列代碼;

一 事件介紹

 事件一般是用於瀏覽器和使用者操作進行互動;最早是IE和Netscape Navigator中出現,作為分擔伺服器端元算負載的一種手段;
 而DOM2級規範開始嘗試以一種符合邏輯的方式標準化DOM事件;
 IE9/Firefox/Opera/Safari和Chrome全部已經實現了"DOM2級事件"模組的核心部分;
 IE8之前瀏覽器仍然使用其專有事件模型;
 JavaScript有三種事件模型:內聯模型/指令碼模型和DOM2模型;

二 內聯模型(HTML事件處理常式) 

這種模型是最傳統的簡單的一種處理事件的方法;
在內聯模型中,事件處理函數是HTML標籤的一個屬性,用於處理指定事件;
雖然內聯在早期使用較多,但它是和HTML混寫的,並沒有與HTML分離;

在HTML中把事件處理函數作為屬性執行JS代碼;
<input type="button" value="按鈕" onclick="alert('Lee');" /> 注意單雙引號;
在HTML中把事件處理函數作為屬性執行JS函數;
<input type="button" value="按鈕" onclick="box();" /> 執行JS的函數;
PS:函數不得放到window.onload裡面,這樣就看不見了; 

三 指令碼模型(DOM0級事件處理常式)

 

// 由於內聯模型違反了HTML和JavaScript代碼層次分離的原則;// 我們可以在JavaScript中處理事件,這種處理方式就是指令碼模型;  var input = document.getElementsByTagName('input')[0];     // 得到input對象;  input.onclick = function(){                  // 匿名函數執行;    alert('Lee');                }  // PS:通過匿名函數,可以直接觸發對應的代碼;  //  也可以通過指定的函數名賦值的方式來執行函數(賦值的函數名不要跟括弧);  input.onclick = box;                      // 把匿名函數賦值給事件處理函數;  input.onclick = null;                     // 刪除事件處理常式;

  四 事件處理函數

  // JavaScript可以處理的事件類型為:滑鼠事件/鍵盤事件/HTML事件;
JavaScript事件處理函數及其使用列表
事件處理函數 影響的元素 何時發生
onabort 映像 當映像載入被中斷時;
onblur 視窗/架構/所有表單對象 當焦點從對象上移開時;
onchange 輸入框/選擇框/文本域 當改變一個元素的值且失去焦點時;
onclick 連結/按鈕/表單對象/映像等 當使用者單擊對象時;
ondblclick 連結/按鈕/表單對象 當使用者雙擊對象時;
ondragdrop 視窗 當使用者將一個對象拖放到瀏覽器視窗時;
onError 視窗/架構/所有表單對象 當指令碼中發生語法錯誤時;
onfocus 視窗/架構/所有表單對象 當單擊滑鼠或將滑鼠移動聚焦到視窗或架構時;
onkeydown 文檔/映像/連結/表單 當按鍵被按下時;
onkeypress 文檔/映像/串連/表單 當按鍵被按下然後鬆開時;
onkeyup 文檔/映像/連結/表單 當按鍵被鬆開時;
onload 主體/框架組/映像 文檔或映像載入後;
onunload 主體/框架組 文檔或框架組卸載後;
onmouseout 連結 當表徵圖移除連結時;
onmouseover 連結 當滑鼠移到連結時;
onmove 視窗 當瀏覽器視窗移動時;
onreset 表單複位按鈕 單擊表單的reset按鈕;
onresize 視窗 當改變瀏覽器視窗大小時;
onselect 表單元素 當選擇一個表單對象時;
onsubmit 表單 當發送表格到伺服器時;
// PS:對於每一個事件,它都有自己的觸發範圍和方式,事件處理將失效;

1.滑鼠事件,頁面所有元素都可觸發

(1).click:當使用者單擊滑鼠按鍵或按下斷行符號鍵時觸發;
    input.onclick = function(){
        alert('Lee');
    };

(2).dblclick:當使用者雙擊滑鼠按鍵時觸發;
    input.ondblclick = function(){
        alert('Lee');
    }

(3).mousedown:當使用者按下滑鼠還未彈起時觸發;
    input.onmousedown = function(){
        alert('Lee');
    }

(4)mouseup:當使用者釋放滑鼠按鍵時觸發;
    input.onmouseup = function(){
        alert('Lee');
    }

(5).mouseover:當滑鼠移到某個元素上方時觸發;
    input.onmouseover = function(){
        alert('Lee');
    }

(6).mouseout:當滑鼠移出某個元素上方時觸發;
    input.onmouseout = function(){
        alert('Lee');
    }

(7).mousemove:當滑鼠指標在元素上移動時觸發;
    input.onmousemove = function(){
        alert('Lee');
    }

2.鍵盤事件

 (1).keydown:當使用者按下鍵盤上任意鍵觸發,如果按住不放,會重複觸發;
    onkeydown = function(){
        alert('Lee');
    }

(2).keypress:當使用者按下鍵盤上的字元鍵觸發,如果按住不放,會重複觸發;
    onkeypress = function(){
        alert('Lee');
    }

(3).keyup:當使用者釋放鍵盤上的鍵觸發;
    onkeyup = function(){
        alert('Lee');
    }

3.HTML事件

(1).load:當頁面完全載入後(包括所有映像/JavaScript檔案/CSS檔案等外部資源),就會觸發window上面的load事件;
window.onload = function(){
alert('Lee');
}

// 映像上面也可以觸發load事件,無論是在DOM中的映像元素還是HTML中的映像元素;
// 因此可以在HTML中為任何映像指定onload事件處理常式;
<img src='smile.client.gif' onload="alert('Image loaded.')" >
// PS:新映像元素不一定是從添加到文檔後才開始下載,只要設定src屬性就會開始下載;

// <script>元素也會觸發load事件,以便開發人員確定動態載入的JavaScript檔案是否載入完畢;
// 與映像不同,只有在設定了<script>元素的src屬性並將該元素添加到文檔後,才會開始下載JavaScript檔案;

 (2).unload:當文檔被完全卸載後觸發;
 // 只要使用者從一個頁面切換到另一個頁面,就會發生unload事件;
 // 而利用這個事件最多的情況是清除引用,以避免記憶體流失;
     window.onunload = function(){
         alert('Lee');
     }
(3).select:當使用者選擇文字框(input或textarea)內容改變且失去焦點後觸發;
     input.onselect = function(){
         alert('Lee');
     }
(4).change:當文字框(input或textarea)內容改變且失去焦點後觸發;
     input.onchange = function(){
         alert('Lee');
     }
(5).focus:當頁面或元素獲得焦點時在window及相關元素上面觸發;這個事件不會冒泡;
     input.onfocus = function(){
         alert('Lee');
     }
(6).blur:當頁面或元素失去焦點時在window及相關元素上觸發;這個事件不會冒泡;
     input.onblur = function(){
         alert('Lee');
     }
(7).submit:當使用者點擊提交按鈕在<form>元素上觸發;
     form.onsubmit = function(){
         alert('Lee');
     }

(8).reset:當使用者點擊重設按鈕在<form>元素上觸發;
    form.onreset = function(){
        alert('Lee');
    }

(9).resize:當瀏覽器視窗被調整到一個新的高度或寬度時,就會觸發resize事件;

// 這個事件在window(視窗)上觸發;瀏覽器視窗最大化或最小化也會觸發resize事件;
// IE/Safari/Chrome和Opera會在瀏覽器變化時不斷觸發resize事件;
// Firefox則只會在使用者停止調整視窗大小時才會觸發resize事件;
    window.onresize = function(){
        alert('Lee');
    }

(10).scroll:當使用者滾動捲軸的元素使觸發;
    window.onscroll = function(){
        alert('Lee');
    }