第5章 事件處理

1、5.1事件的基本概念們將鼠標(biāo)或鍵盤在網(wǎng)頁對(duì)象上的動(dòng)作稱為“事件”，而由鼠標(biāo)或鍵盤引發(fā)的一連串程序的動(dòng)作稱為“事件驅(qū)動(dòng)”，對(duì)事件進(jìn)行處理的程序或函數(shù)稱為“事件處理程序”。事件處理的過程分為3步：發(fā)生事件。啟動(dòng)事件處理程序。事件處理程序作出反應(yīng)。其中，要使事件處理程序能夠啟動(dòng)，必須通過指定的對(duì)象來調(diào)用相應(yīng)的事件，然后通過該事件調(diào)用事件處理程序。事件處理程序可以是任意JavaScript語句，但是我們一般用特定的自定義函數(shù)（function）來對(duì)事件進(jìn)行處理。在使用事件處理程序?qū)撁孢M(jìn)行操作時(shí)，最主要的是如何通過對(duì)象的事件來指定事件處理程序，其指定方式主要有3種方法（1）直接在HTML標(biāo)記中指定語法

2、：（2）指定特定對(duì)象的特定事件語法：/事件處理程序代碼（3）在JavaScript中說明語法：. = ;事件說明鼠標(biāo)鍵盤事件onclick單擊鼠標(biāo)時(shí)觸發(fā)此事件ondblclick雙擊鼠標(biāo)時(shí)觸發(fā)此事件onmousedown按下鼠標(biāo)時(shí)觸發(fā)此事件onmouseup鼠標(biāo)按下后松開鼠標(biāo)時(shí)觸發(fā)此事件onmouseover當(dāng)鼠標(biāo)移動(dòng)到某對(duì)象范圍的上方時(shí)觸發(fā)此事件onmousemove鼠標(biāo)移動(dòng)時(shí)觸發(fā)此事件onmouseout當(dāng)鼠標(biāo)離開某對(duì)象范圍時(shí)觸發(fā)此事件onkeypress當(dāng)鍵盤上的某個(gè)按鍵被按下并且釋放時(shí)觸發(fā)此事件onkeydown當(dāng)鍵盤上某個(gè)按鍵被按下時(shí)觸發(fā)此事件onkeyup當(dāng)鍵盤上某個(gè)按鍵被按下后松

3、開時(shí)觸發(fā)此事件頁面相關(guān)事件onabort圖片在下載時(shí)被用戶中斷時(shí)觸發(fā)此事件onbeforeunload當(dāng)前頁面的內(nèi)容將要被改變時(shí)觸發(fā)此事件onerror出現(xiàn)錯(cuò)誤時(shí)觸發(fā)此事件onload頁面內(nèi)容完成時(shí)觸發(fā)此事件（也就是頁面加載事件）onresize當(dāng)瀏覽器的窗口大小被改變時(shí)觸發(fā)此事件onunload當(dāng)前頁面將被改變時(shí)觸發(fā)此事件表單相關(guān)事件onblur當(dāng)前元素失去焦點(diǎn)時(shí)觸發(fā)此事件onchange當(dāng)前元素失去焦點(diǎn)并且元素的內(nèi)容發(fā)生改變時(shí)觸發(fā)此事件onfocus當(dāng)某個(gè)元素獲得焦點(diǎn)時(shí)觸發(fā)此事件onreset當(dāng)表單中RESET的屬性被激活時(shí)觸發(fā)此事件onsubmit一個(gè)表單被提交時(shí)觸發(fā)此事件滾動(dòng)字幕事件o

4、nbounce在Marquee內(nèi)的內(nèi)容移動(dòng)至Marquee顯示范圍之外時(shí)觸發(fā)此事件onfinish當(dāng)Marquee元素完成需要顯示的內(nèi)容后觸發(fā)此事件onstart當(dāng)Marquee元素開始顯示內(nèi)容時(shí)觸發(fā)此事件編輯事件onbeforecopy當(dāng)頁面當(dāng)前被選擇內(nèi)容將要復(fù)制到瀏覽者系統(tǒng)的剪貼板前觸發(fā)此事件onbeforecut當(dāng)頁面中的一部分或全部?jī)?nèi)容被剪切到瀏覽者系統(tǒng)剪貼板時(shí)觸發(fā)此事件onbeforeeditfocus當(dāng)前元素將要進(jìn)入編輯狀態(tài)時(shí)觸發(fā)此事件onbeforepaste將內(nèi)容要從瀏覽者的系統(tǒng)剪貼板中粘貼到頁面上時(shí)觸發(fā)此事件onbeforeupdate當(dāng)瀏覽者粘貼系統(tǒng)剪貼板中的內(nèi)容時(shí)通知目標(biāo)

5、對(duì)象oncontextmenu當(dāng)瀏覽者按下鼠標(biāo)右鍵出現(xiàn)菜單時(shí)或者通過鍵盤的按鍵觸發(fā)頁面菜單時(shí)觸發(fā)此事件oncopy當(dāng)頁面當(dāng)前的被選擇內(nèi)容被復(fù)制后觸發(fā)此事件oncut當(dāng)頁面當(dāng)前的被選擇內(nèi)容被剪切時(shí)觸發(fā)此事件ondrag當(dāng)某個(gè)對(duì)象被拖動(dòng)時(shí)觸發(fā)此事件(活動(dòng)事件)ondragend當(dāng)鼠標(biāo)拖動(dòng)結(jié)束時(shí)觸發(fā)此事件，即鼠標(biāo)的按鈕被釋放時(shí)ondragenter當(dāng)對(duì)象被鼠標(biāo)拖動(dòng)進(jìn)入其容器范圍內(nèi)時(shí)觸發(fā)此事件ondragleave當(dāng)對(duì)象被鼠標(biāo)拖動(dòng)的對(duì)象離開其容器范圍內(nèi)時(shí)觸發(fā)此事件ondragover當(dāng)被拖動(dòng)的對(duì)象在另一對(duì)象容器范圍內(nèi)拖動(dòng)時(shí)觸發(fā)此事件ondragstart當(dāng)某對(duì)象將被拖動(dòng)時(shí)觸發(fā)此事件ondrop在一個(gè)拖

6、動(dòng)過程中，釋放鼠標(biāo)鍵時(shí)觸發(fā)此事件onlosecapture當(dāng)元素失去鼠標(biāo)移動(dòng)所形成的選擇焦點(diǎn)時(shí)觸發(fā)此事件onpaste當(dāng)內(nèi)容被粘貼時(shí)觸發(fā)此事件onselect當(dāng)文本內(nèi)容被選擇時(shí)觸發(fā)此事件onselectstart當(dāng)文本內(nèi)容的選擇將開始發(fā)生時(shí)觸發(fā)此事件數(shù)據(jù)綁定事件onafterupdate當(dāng)數(shù)據(jù)完成由數(shù)據(jù)源到對(duì)象的傳送時(shí)觸發(fā)此事件oncellchange當(dāng)數(shù)據(jù)來源發(fā)生變化時(shí)觸發(fā)此事件ondataavailable當(dāng)數(shù)據(jù)接收完成時(shí)觸發(fā)此事件ondatasetchanged數(shù)據(jù)在數(shù)據(jù)源發(fā)生變化時(shí)觸發(fā)此事件ondatasetcomplete當(dāng)數(shù)據(jù)源的全部有效數(shù)據(jù)讀取完畢時(shí)觸發(fā)此事件onerrorupd

7、ate當(dāng)使用onbeforeupdate事件觸發(fā)取消了數(shù)據(jù)傳送時(shí)，代替onafterupdate事件onrowenter當(dāng)前數(shù)據(jù)源的數(shù)據(jù)發(fā)生變化并且有新的有效數(shù)據(jù)時(shí)觸發(fā)此事件onrowexit當(dāng)前數(shù)據(jù)源的數(shù)據(jù)將要發(fā)生變化時(shí)觸發(fā)此事件onrowsdelete當(dāng)前數(shù)據(jù)記錄將被刪除時(shí)觸發(fā)此事件onrowsinserted當(dāng)前數(shù)據(jù)源將要插入新數(shù)據(jù)記錄時(shí)觸發(fā)此事件外部事件onafterprint當(dāng)文檔被打印后觸發(fā)此事件onbeforeprint當(dāng)文檔即將打印時(shí)觸發(fā)此事件onfilterchange當(dāng)某個(gè)對(duì)象的濾鏡效果發(fā)生變化時(shí)觸發(fā)此事件onhelp當(dāng)瀏覽者按下F1鍵或者瀏覽器的幫助菜單時(shí)觸發(fā)此事件onp

8、ropertychange當(dāng)對(duì)象的屬性之一發(fā)生變化時(shí)觸發(fā)此事件onreadystatechange當(dāng)對(duì)象的初始化屬性值發(fā)生變化時(shí)觸發(fā)此事件單擊事件（onclick）是在鼠標(biāo)單擊時(shí)被觸發(fā)的事件。單擊是指鼠標(biāo)停留在對(duì)象上，按下鼠標(biāo)鍵，在沒有移動(dòng)鼠標(biāo)的同時(shí)放開鼠標(biāo)鍵的這一完整過程。單擊事件一般應(yīng)用于Button對(duì)象、Checkbox對(duì)象、Image對(duì)象、Link對(duì)象、Radio對(duì)象、Reset對(duì)象和Submit對(duì)象，Button對(duì)象一般只會(huì)用到onclick事件處理程序，因?yàn)樵搶?duì)象不能從用戶那里得到任何信息，如果沒有onclick事件處理程序，按鈕對(duì)象將不會(huì)有任何作用。鼠標(biāo)的按下或松開事件分別是on

9、mousedown和onmouseup事件。其中，onmousedown事件用于在鼠標(biāo)按下時(shí)觸發(fā)事件處理程序，onmouseup事件是在鼠標(biāo)松開時(shí)觸發(fā)事件處理程序。在用鼠標(biāo)單擊對(duì)象時(shí)，可以用這兩個(gè)事件實(shí)現(xiàn)其動(dòng)態(tài)效果。鼠標(biāo)的移入和移出事件分別是onmouseover和onmousemove事件。其中，onmouseover事件在鼠標(biāo)移動(dòng)到對(duì)象上方時(shí)觸發(fā)事件處理程序，onmousemove事件在鼠標(biāo)移出對(duì)象上方時(shí)觸發(fā)事件處理程序?？梢杂眠@兩個(gè)事件在指定的對(duì)象上移動(dòng)鼠標(biāo)時(shí)，實(shí)現(xiàn)其對(duì)象的動(dòng)態(tài)效果。鼠標(biāo)移動(dòng)事件（onmousemove）是鼠標(biāo)在頁面上進(jìn)行移動(dòng)時(shí)觸發(fā)事件處理程序，可以在該事件中用docum

10、ent對(duì)象實(shí)時(shí)讀取鼠標(biāo)在頁面中的位置。鍵盤事件包含onkeypress、onkeydown和onkeyup事件，其中onkeypress事件是在鍵盤上的某個(gè)鍵被按下并且釋放時(shí)觸發(fā)此事件的處理程序，一般用于鍵盤上的單鍵操作。Onkeydown事件是在鍵盤上的某個(gè)鍵被按下時(shí)觸發(fā)此事件的處理程序，一般用于組合鍵的操作。Onkeyup事件是在鍵盤上的某個(gè)鍵被按下后松開時(shí)觸發(fā)此事件的處理程序，一般用于組合鍵的操作。字母和數(shù)字鍵的鍵碼值按鍵鍵值按鍵鍵值按鍵鍵值按鍵鍵值A(chǔ)(a)65J(j)74S(s)83149B(b)66K(k)75T(t)84250C(c)67L(l)76U(u)85351D(d)68M

11、(m)77V(v)86452E(e)69N(n)78W(w)87553F(f)70O(o)79X(x)88654G(g)71P(p)80Y(y)89755H(h)72Q(q)81Z(z)90856I(i)73R(r)82048957數(shù)字鍵盤上按鍵的鍵碼值按鍵鍵值按鍵鍵值按鍵鍵值按鍵鍵值0968104F1112F71181979105F2113F8119298*106F3114F9120399+107F4115F101214100Enter108F5116F111225101-109F6117F121236102.1107103/111控制鍵的鍵碼值按鍵鍵值按鍵鍵值按鍵鍵值按鍵鍵值B a c k

12、 Space8Esc27Right Arrow()39-_189Tab9Spacebar32Down Arrow()40.190Clear12Page Up33Insert45/?191Enter13Page Down34Delete46192Shift16End35Num Lock144219Control17Home36;:186|220Alt18Left Arrow()37=+187221C a p e Lock20Up Arrow()38,188222加載事件（onload）是在網(wǎng)頁加載完畢后觸發(fā)相應(yīng)的事件處理程序，它可以在網(wǎng)頁加載完成后對(duì)網(wǎng)頁中的表格樣式、字體、背景顏色等進(jìn)行設(shè)置。卸

13、載事件（unload）是在卸載網(wǎng)頁時(shí)觸發(fā)相應(yīng)的事件處理程序，卸載網(wǎng)頁是指關(guān)閉當(dāng)前頁或從當(dāng)前頁跳轉(zhuǎn)到其他網(wǎng)頁中，該事件常被用于在關(guān)閉當(dāng)前頁或跳轉(zhuǎn)其他網(wǎng)頁時(shí)，彈出詢問提示框。頁面的大小事件（onresize）是用戶改變?yōu)g覽器的大小時(shí)觸發(fā)事件處理程序，它主要用于固定瀏覽器的大小。獲得焦點(diǎn)事件（onfocus）是當(dāng)某個(gè)元素獲得焦點(diǎn)時(shí)觸發(fā)事件處理程序。失去焦點(diǎn)事件（onblur）是當(dāng)前元素失去焦點(diǎn)時(shí)觸發(fā)事件處理程序。在一般情況下，這兩個(gè)事件是同時(shí)使用的。失去焦點(diǎn)修改事件（onchange）是當(dāng)前元素失去焦點(diǎn)并且元素的內(nèi)容發(fā)生改變時(shí)觸發(fā)事件處理程序。該事件一般在下拉文本框中使用。表單提交事件（onsubm

14、it）是在用戶提交表單時(shí)（通常使用“提交”按鈕，也就是將按鈕的type屬性設(shè)為submit）,在表單提交之前被觸發(fā)，因此，該事件的處理程序通過返回false值來阻止表單的提交。該事件可以用來驗(yàn)證表單輸入項(xiàng)的正確性。表單重置事件（onreset）與表單提交事件的處理過程相同，該事件只是將表單中的各元素的值設(shè)置為原始值。一般用于清空表單中的文本框。下面給出這兩個(gè)事件的使用格式：formname：表單名稱。Funname：函數(shù)名或執(zhí)行語句，如果是函數(shù)名，在該函數(shù)中必須有布爾型的返回值。onbounce事件是在標(biāo)記中的內(nèi)容滾動(dòng)到上下或左右邊界時(shí)觸發(fā)的事件處理程序，該事件只有在標(biāo)記的behavior屬性

15、設(shè)為aloernate時(shí)才有效。onstart事件是在標(biāo)記中的文本開始顯示時(shí)觸發(fā)事件處理程序。可以通過該事件在滾動(dòng)內(nèi)容顯示時(shí)，設(shè)置其顏色、樣式、滾動(dòng)方向等。1復(fù)制事件復(fù)制事件是在瀏覽器中復(fù)制被選中的部份或全部?jī)?nèi)容時(shí)觸發(fā)事件處理程序，復(fù)制事件有onbeforecopy和oncopy兩個(gè)事件，onbeforecopy事件是將網(wǎng)頁內(nèi)容復(fù)制到剪貼版時(shí)觸發(fā)事件處里程序，oncopy事件是在網(wǎng)頁中復(fù)制內(nèi)容時(shí)觸發(fā)事件處里程序。2 2剪切事件剪切事件剪切事件是在瀏覽器中剪切被選中的內(nèi)容時(shí)觸發(fā)事件處理程序，剪切事件有onbeforecut和oncut兩個(gè)事件，onbeforecut事件是當(dāng)頁面中的一部分或全部?jī)?nèi)

16、容被剪切到瀏覽者系統(tǒng)剪貼板時(shí)觸發(fā)事件處理程序，oncut事件是當(dāng)頁面中被選擇的內(nèi)容被剪切時(shí)觸發(fā)事件處理程序。3 3粘貼事件粘貼事件粘貼事件（onbeforepaste）是將內(nèi)容要從瀏覽者的系統(tǒng)剪貼板中粘貼到頁面上時(shí)所觸發(fā)的事件處理程序?？梢岳迷撌录苊鉃g覽者在添寫信息時(shí)，對(duì)驗(yàn)證信息進(jìn)行粘貼，如密碼文本框和確定密碼文本框中的信息。4 4選擇事件選擇事件選擇事件是用戶在body、input或textarea表單區(qū)域中選擇文本時(shí)觸發(fā)事件處理程序。選擇事件有onselect和onselectstart兩個(gè)事件。onselect事件是當(dāng)文本內(nèi)容被選擇時(shí)觸發(fā)事件處理程序。當(dāng)使用本事件時(shí)，只能在相應(yīng)的文本中選擇一個(gè)字符或是一個(gè)漢字后觸發(fā)本事件，并不是用鼠標(biāo)選擇文本后，松開鼠標(biāo)時(shí)觸發(fā)。1 1拖放對(duì)象事件拖放對(duì)象事件拖放對(duì)象事件包含ondrag、ondragend和ondragstart事件。ondrag事件是當(dāng)某個(gè)對(duì)象被拖動(dòng)時(shí)觸發(fā)事件處理程序。ondragend事件是當(dāng)鼠標(biāo)拖動(dòng)結(jié)束時(shí)觸發(fā)事件處理程序，也就是鼠標(biāo)的按鈕被釋放時(shí)觸發(fā)該事件。ondragstart事件是當(dāng)某對(duì)象將被拖動(dòng)時(shí)觸發(fā)事件處理程序，也就是當(dāng)鼠標(biāo)按下，開始移動(dòng)鼠標(biāo)時(shí)觸發(fā)該事件。2 2放置目標(biāo)事件放置目標(biāo)事件放置目標(biāo)事件包含ondragover、ond