事件一般是用於瀏覽器和用戶操作進行交互。最早是 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 事件

部分事件處理函數 :

所有的事件處理函數都會都有兩個部分組成，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筆記——事件