JavaScript的事件入門

 JavaScript 事件是由訪問Web 頁面的用戶引起的一系列操作，例如：用戶點擊。當用戶

執行某些操作的時候，再去執行一系列代碼。

 

一．事件介紹

事件一般是用於瀏覽器和用戶操作進行交互。最早是IE 和Netscape Navigator 中出現，

作爲分擔服務器端運算負載的一種手段。直到幾乎所有的瀏覽器都支持事件處理。而DOM2

級規範開始嘗試以一種復合邏輯的方式標準化DOM 事件。IE9、Firefox、Opera、Safari 和

Chrome 全都已經實現了“DOM2 級事件”模塊的核心部分。IE8 之前瀏覽器仍然使用其專

有事件模型。

JavaScript 有三種事件模型：內聯模型、腳本模型和DOM2 模型。

 

二．內聯模型

這種模型是最傳統接單的一種處理事件的方法。在內聯模型中，事件處理函數是HTML

標籤的一個屬性，用於處理指定事件。雖然內聯在早期使用較多，但它是和HTML 混寫的，

並沒有與HTML 分離。

//在HTML 中把事件處理函數作爲屬性執行JS 代碼
<input type="button" value="按鈕" onclick="alert('Lee');" /> //注意單雙引號
//在HTML 中把事件處理函數作爲屬性執行JS 函數
<input type="button" value="按鈕" onclick="box();" /> //執行JS 的函數

PS：函數不得放到window.onload 裏面，這樣就看不見了。

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

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

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

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

四．事件處理函數
JavaScript 可以處理的事件類型爲：鼠標事件、鍵盤事件、HTML 事件。

PS：所有的事件處理函數都會都有兩個部分組成，on + 事件名稱，例如click 事件的事
件處理函數就是：onclick。在這裏，我們主要談論腳本模型的方式來構建事件，違反分離原
則的內聯模式，我們忽略掉。

對於每一個事件，它都有自己的觸發範圍和方式，如果超出了觸發範圍和方式，事件處
理將失效。

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

//click：當用戶單擊鼠標按鈕或按下回車鍵時觸發。
input.onclick = function () {
alert('Lee');
};
//dblclick：當用戶雙擊主鼠標按鈕時觸發。
input.ondblclick = function () {
alert('Lee');
};
//mousedown：當用戶按下了鼠標還未彈起時觸發。
input.onmousedown = function () {
alert('Lee');
};
//mouseup：當用戶釋放鼠標按鈕時觸發。
input.onmouseup = function () {
alert('Lee');
};
//mouseover：當鼠標移到某個元素上方時觸發。
input.onmouseover = function () {
alert('Lee');
};
//mouseout：當鼠標移出某個元素上方時觸發。
input.onmouseout = function () {
alert('Lee');
};
//mousemove：當鼠標指針在元素上移動時觸發。
input.onmousemove = function () {
alert('Lee');
};

2.鍵盤事件

//keydown：當用戶按下鍵盤上任意鍵觸發，如果按住不放，會重複觸發。
onkeydown = function () {
alert('Lee');
};
//keypress：當用戶按下鍵盤上的字符鍵觸發，如果按住不放，會重複觸發。
onkeypress = function () {
alert('Lee');
};
//keyup：當用戶釋放鍵盤上的鍵觸發。
onkeyup = function () {
alert('Lee');
};

3.HTML 事件

//load：當頁面完全加載後在window 上面觸發，或當框架集加載完畢後在框架集上觸發。
window.onload = function () {
alert('Lee');
};
//unload：當頁面完全卸載後在window 上面觸發，或當框架集卸載後在框架集上觸發。
window.onunload = function () {
alert('Lee');
};
//select：當用戶選擇文本框(input 或textarea)中的一個或多個字符觸發。
input.onselect = function () {
alert('Lee');
};
//change：當文本框(input 或textarea)內容改變且失去焦點後觸發。
input.onchange = function () {
alert('Lee');
};
//focus：當頁面或者元素獲得焦點時在window 及相關元素上面觸發。
input.onfocus = function () {
alert('Lee');
};
//blur：當頁面或元素失去焦點時在window 及相關元素上觸發。
input.onblur = function () {
alert('Lee');
};
//submit：當用戶點擊提交按鈕在<form>元素上觸發。
form.onsubmit = function () {
alert('Lee');
};
//reset：當用戶點擊重置按鈕在<form>元素上觸發。
form.onreset= function () {
alert('Lee');
};
//resize：當窗口或框架的大小變化時在window 或框架上觸發。
window.onresize = function () {
alert('Lee');
};
//scroll：當用戶滾動帶滾動條的元素時觸發。
window.onscroll = function () {
alert('Lee');
};