JavaScript筆記——事件

標籤：卸載   eset   字元   使用者   滑鼠事件   name   inpu   border   orm   

事件一般是用於瀏覽器和使用者操作進行互動。最早是 IE 和 Netscape Navigator 中出現， 作為分擔伺服器端運算負載的一種手段。直到幾乎所有的瀏覽器都支援事件處理。而 DOM2 級規範開始嘗試以一種複合邏輯的方式標準化 DOM 事件

JavaScript 有三種事件模型：內聯模型、指令碼模型和 DOM2 模型

內聯模型

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

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

指令碼模型

由於內聯模型違反了 HTML 與 JavaScript 代碼層次分離的原則。為瞭解決這個問題，我 們可以在 JavaScript 中處理事件。這種處理方式就是指令碼模型

var input = document.getElementsByTagName(‘input‘)[0]; //得到 input 對象input.onclick = function () { //匿名函數執行alert(‘abc‘);};

通過匿名函數，可以直接觸發對應的代碼。也可以通過指定的函數名賦值的方式 來執行函數(賦值的函數名不要跟著括弧)

input.onclick = box; //把函數名賦值給事件處理函數

事件處理函數

JavaScript 可以處理的事件類型為：滑鼠事件、鍵盤事件、HTML 事件

部分事件處理函數 :

事件處理函數	影響的元素	何時發生
onchange	輸入框，選擇框和文本地區	當改變一個元素的值且失去焦點時
onclick	連結、按鈕、表單對象、影像地圖地區	當使用者單擊對象時
ondblclick	連結、按鈕、表單對象	當使用者雙擊對象時
onkeydown	文檔、映像、連結、表單	當按鍵被按下時
onkeyup	文檔、映像、連結、表單	當按鍵被鬆開時
onkeypress	文檔、映像、連結、表單	當按鍵被按下然後鬆開時
onload	主題、框架組、映像	文檔或映像載入後
onunload	主體、框架組	文檔或框架組卸載後
onmove	視窗	當瀏覽器視窗移動時
onselect	表單元素	當選擇一個表單對象時
onsubmit	表單	當發送表格到伺服器時
onreset	表單複位按鈕	單擊表單的 reset 按鈕

所有的事件處理函數都會都有兩個部分組成，on + 事件名稱，例如 click 事件的事 件處理函數就是：onclick。對於每一個事件，它都有自己的觸發範圍和方式，如果超出了觸發範圍和方式，事件處理將失效

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

click：當使用者單擊滑鼠按鍵或按下斷行符號鍵時觸發

input.onclick = function () { alert(‘abc‘); };

dblclick：當使用者雙擊主要滑鼠按鍵時觸發

input.ondblclick = function () { alert(‘abc‘); };

 

2.鍵盤事件

keydown：當使用者按下鍵盤上任意鍵觸發，如果按住不放，會重複觸發

onkeydown = function () {alert(‘abc‘);};

keypress：當使用者按下鍵盤上的字元鍵觸發，如果按住不放，會重複觸發

onkeypress = function () { alert(‘abc‘); };

keyup：當使用者釋放鍵盤上的鍵觸發

onkeyup = function () { alert(‘abc‘); };

 

3.HTML 事件

load：當頁面完全載入後在 window 上面觸發，或當框架組載入完畢後在框架組上觸發

window.onload = function () { alert(‘abc‘); };

unload：當頁面完全卸載後在 window 上面觸發，或當框架組卸載後在框架組上觸發

window.onunload = function () { alert(‘abc‘); };

select：當使用者選擇文字框(input 或 textarea)中的一個或多個字元觸發

input.onselect = function () { alert(‘abc‘); };

change：當文字框(input 或 textarea)內容改變且失去焦點後觸發

input.onchange = function () { alert(‘abc‘); };

submit：當使用者點擊提交按鈕在<form>元素上觸發

form.onsubmit = function () { alert(‘abc‘); };

reset：當使用者點擊重設按鈕在<form>元素上觸發

form.onreset= function () { alert(‘abc‘); };

 

JavaScript筆記——事件