二十、事件入門
二十、事件入門
JavaScript事件是由訪問Web頁面的用戶引起的一系列操作，例如：用戶點擊。當用戶執行某些操作的時候，再去執行一系列代碼。
1.事件介紹
事件一般是用於瀏覽器和用戶操作進行交互。最早是IE和Netscape Navigator中出現，作為分擔服務器端運算負載的一種手段。直到幾乎所有的瀏覽器都支持事件處理。而DOM2級規範開始嘗試以一種復合邏輯的方式標準化DOM事件。IE9、Firefox、Opera、Safari和Chrome全都已經實現了“DOM2級事件”模塊的核心部分。IE8之前瀏覽器仍然使用其專有事件模型。
JavaScript有三種事件模型：內聯模型、腳本模型和DOM2模型。
2.內聯模型
這種模型是最傳統接單的一種處理事件的方法。在內聯模型中，事件處理函數是HTML標簽的一個屬性，用於處理指定事件。雖然內聯在早期使用較多，但它是和HTML混寫的，並沒有與HTML分離。
//在HTML中把事件處理函數作為屬性執行JS代碼
<input type="button" value="按鈕" onclick="alert(‘Lee‘);" /> //註意單雙引號
//在HTML中把事件處理函數作為屬性執行JS函數
<input type="button" value="按鈕" onclick="box();" /> //執行JS的函數
PS：函數不得放到window.onload裏面，這樣就看不見了。
3.腳本模型
由於內聯模型違反了HTML與JavaScript代碼層次分離的原則。為了解決這個問題，我們可以在JavaScript中處理事件。這種處理方式就是腳本模型。
var input = document.getElementsByTagName(‘input‘)[0]; //得到input對象
input.onclick = function () { //匿名函數執行
alert(‘Lee‘);
};
PS：通過匿名函數，可以直接觸發對應的代碼。也可以通過指定的函數名賦值的方式來執行函數(賦值的函數名不要跟著括號)。
input.onclick = box; //把函數名賦值給事件處理函數
4.事件處理函數
1.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：所有的事件處理函數都會都有兩個部分組成，on + 事件名稱，例如click事件的事件處理函數就是：onclick。在這裏，我們主要談論腳本模型的方式來構建事件，違反分離原則的內聯模式，我們忽略掉。
對於每一個事件，它都有自己的觸發範圍和方式，如果超出了觸發範圍和方式，事件處理將失效。
2.鼠標事件，頁面所有元素都可觸發
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‘);
};
3.鍵盤事件
keydown：當用戶按下鍵盤上任意鍵觸發，如果按住不放，會重復觸發。
onkeydown = function () {
alert(‘Lee‘);
};
keypress：當用戶按下鍵盤上的字符鍵觸發，如果按住不放，會重復觸發。
onkeypress = function () {
alert(‘Lee‘);
};
keyup：當用戶釋放鍵盤上的鍵觸發。
onkeyup = function () {
alert(‘Lee‘);
};
4.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‘);
};
二十、事件入門