零點(diǎn)起飛學(xué)HTML+CSS之事件

1、第16章 事件事件（Event）是可以被網(wǎng)頁(yè)或者網(wǎng)頁(yè)上的元素識(shí)別的操作。就是指當(dāng)瀏覽者在瀏覽網(wǎng)頁(yè)的時(shí)候觸發(fā)了某些動(dòng)作所作出的相應(yīng)反應(yīng)。當(dāng)瀏覽者觸發(fā)了某一事件，事件就會(huì)調(diào)用相應(yīng)的代碼，從而完成某一操作。網(wǎng)頁(yè)上的事件可以增加網(wǎng)頁(yè)與用戶(hù)的交互操作，也可以增強(qiáng)網(wǎng)頁(yè)的動(dòng)態(tài)效果。116.1 常見(jiàn)事件常見(jiàn)事件就是指在HTML中比較常用，比較簡(jiǎn)單的事件。本節(jié)將用較簡(jiǎn)單、容易明白的例子詳細(xì)講解這些事件。216.1.1 單擊事件onClick 單擊事件是指當(dāng)鼠標(biāo)單擊選定元素（如超鏈接、圖片等）時(shí)觸發(fā)的事件，可以通過(guò)onClick來(lái)進(jìn)行設(shè)置。其語(yǔ)法結(jié)構(gòu)如下。文本內(nèi)容316.1.2 雙擊事件onDblClick雙擊事

2、件是指當(dāng)鼠標(biāo)雙擊選定的元素（如超鏈接、圖片等）時(shí)觸發(fā)的事件，可以通過(guò)onDblClick來(lái)進(jìn)行設(shè)置。語(yǔ)法形式如下。文本內(nèi)容416.2 鼠標(biāo)觸發(fā)事件onMouse鼠標(biāo)觸發(fā)事件是指鼠標(biāo)在選定元素上做某一動(dòng)作所觸發(fā)的事件?？梢酝ㄟ^(guò)onMouse來(lái)進(jìn)行設(shè)置。本節(jié)所講的onMouse里共有五個(gè)觸發(fā)事件，分別是鼠標(biāo)按下事件、鼠標(biāo)移動(dòng)事件、鼠標(biāo)釋放事件、鼠標(biāo)經(jīng)過(guò)事件和鼠標(biāo)離開(kāi)事件。516.2.1 鼠標(biāo)按下事件onMouseDown鼠標(biāo)按下事件是指當(dāng)按下鼠標(biāo)時(shí)所觸發(fā)的事件，可以通過(guò)onMouseDown來(lái)進(jìn)行設(shè)置。其語(yǔ)法結(jié)構(gòu)如下。616.2.2 鼠標(biāo)釋放事件onMouseUp鼠標(biāo)釋放事件是指當(dāng)按下鼠標(biāo)按鈕被釋

3、放時(shí)觸發(fā)的事件，可以通過(guò)onMouseUp來(lái)進(jìn)行設(shè)置。不難看出，前面所學(xué)的onClick事件和這兩個(gè)小節(jié)說(shuō)的onMouseDown事件、onMouseUp事件有些相似。onMouseDown+onMouseUp=onClick。onMouseUp語(yǔ)法結(jié)構(gòu)如下。716.2.3 鼠標(biāo)停留事件onMouseMove鼠標(biāo)停留事件是指當(dāng)鼠標(biāo)指針停留在選定元素上時(shí)觸發(fā)的事件，可以通過(guò)onMouseMove來(lái)進(jìn)行設(shè)置。其語(yǔ)法結(jié)構(gòu)如下。816.2.4 鼠標(biāo)經(jīng)過(guò)事件onMouseOver鼠標(biāo)經(jīng)過(guò)事件是指當(dāng)鼠標(biāo)經(jīng)過(guò)選定元素時(shí)觸發(fā)的事件，可以通過(guò)onMouseOver來(lái)進(jìn)行設(shè)置。其語(yǔ)法結(jié)構(gòu)如下。916.2.5 鼠標(biāo)

4、離開(kāi)事件onMouseOut鼠標(biāo)離開(kāi)事件是指當(dāng)鼠標(biāo)指針離開(kāi)選定元素時(shí)觸發(fā)該事件，可以通過(guò)onMouseOut來(lái)進(jìn)行設(shè)置。其語(yǔ)法結(jié)構(gòu)如下。1016.3 鍵盤(pán)觸發(fā)事件onKey鍵盤(pán)觸發(fā)事件是指在鍵盤(pán)上做某一動(dòng)作所觸發(fā)的事件?？梢酝ㄟ^(guò)onKey來(lái)進(jìn)行設(shè)置。本節(jié)所講的onKey里共有三個(gè)觸發(fā)事件，分別是：按下鍵盤(pán)按鍵事件、按下鍵盤(pán)按鍵并任意釋放一個(gè)鍵事件和釋放鍵盤(pán)按鍵事件。1116.3.1 按下鍵盤(pán)按鍵事件onkeydown按下鍵盤(pán)按鍵事件是指當(dāng)用戶(hù)按下鍵盤(pán)上任意鍵時(shí)觸發(fā)的事件，可以通過(guò)onkeydown來(lái)進(jìn)行設(shè)置。其語(yǔ)法結(jié)構(gòu)如下。1216.3.2 按下并任意釋放一個(gè)鍵事件onkeypress按下并任

5、意釋放一個(gè)鍵事件是指當(dāng)按下鍵盤(pán)按鍵并任意放開(kāi)一個(gè)鍵時(shí)觸發(fā)的事件，可以通過(guò)onkeypress來(lái)進(jìn)行設(shè)置。其語(yǔ)法結(jié)構(gòu)如下。1316.3.3 釋放鍵盤(pán)按鍵事件onkeyup釋放鍵盤(pán)按鍵事件是指當(dāng)按下鍵盤(pán)按鍵后釋放按鍵時(shí)觸發(fā)的事件，可以通過(guò)onkeyup來(lái)進(jìn)行設(shè)置。其語(yǔ)法結(jié)構(gòu)如下。1416.4 頁(yè)面事件頁(yè)面事件是指在頁(yè)面上做某一動(dòng)作時(shí)所觸發(fā)的事件。頁(yè)面事件包括有很多復(fù)雜的JavaScript程序，本節(jié)將以最簡(jiǎn)單的實(shí)例來(lái)展示各個(gè)頁(yè)面事件的用法和設(shè)置。1516.4.1 圖片下載時(shí)被中斷事件onAbort圖片下載時(shí)被中斷事件是指在下載圖片時(shí)，圖片未下載完就被中斷時(shí)所觸發(fā)的事件，可以通過(guò)onAbort來(lái)進(jìn)行

6、設(shè)置。其語(yǔ)法結(jié)構(gòu)如下。1616.4.2 當(dāng)前頁(yè)面的內(nèi)容將要被改變時(shí)觸發(fā)事件onBeforeUnload當(dāng)前頁(yè)面的內(nèi)容將要被改變時(shí)觸發(fā)事件是指當(dāng)頁(yè)面發(fā)生跳轉(zhuǎn)、返回、刷新、關(guān)閉等將要離開(kāi)本頁(yè)面的時(shí)候，而觸發(fā)的事件，可以通過(guò)onBeforeUnload來(lái)進(jìn)行設(shè)置。其語(yǔ)法結(jié)構(gòu)如下。1716.4.3 頁(yè)面出錯(cuò)事件onError頁(yè)面出錯(cuò)事件是指當(dāng)頁(yè)面在加載文本或圖片時(shí)，發(fā)生錯(cuò)誤所觸發(fā)的事件，可以通過(guò)onError來(lái)進(jìn)行設(shè)置。其語(yǔ)法結(jié)構(gòu)如下。1816.4.4 頁(yè)面加載完事件onLoad 頁(yè)面加載完事件是指當(dāng)頁(yè)面完成圖片、文本等內(nèi)容的加載后觸發(fā)的事件，可以通過(guò)onLoad來(lái)進(jìn)行設(shè)置。其語(yǔ)法結(jié)構(gòu)如下。1916.

7、4.5 改變?yōu)g覽器的窗口大小時(shí)觸發(fā)的事件onResize改變?yōu)g覽器的窗口大小事件是指當(dāng)瀏覽者改變頁(yè)面窗口或框架大小被調(diào)整時(shí)觸發(fā)的事件，可以通過(guò)onResize來(lái)進(jìn)行設(shè)置。其語(yǔ)法結(jié)構(gòu)如下。2016.4.6 拖動(dòng)滾動(dòng)條事件onScroll拖動(dòng)滾動(dòng)條事件是指當(dāng)瀏覽者上下拖動(dòng)滾動(dòng)條時(shí)觸發(fā)的事件，可以通過(guò)onScroll來(lái)進(jìn)行設(shè)置。其語(yǔ)法結(jié)構(gòu)如下。2116.4.7 離開(kāi)頁(yè)面事件onUnload離開(kāi)頁(yè)面事件是指當(dāng)瀏覽者結(jié)束訪問(wèn)網(wǎng)頁(yè)而離開(kāi)網(wǎng)頁(yè)時(shí)觸發(fā)的事件，可以通過(guò)onUnload來(lái)進(jìn)行設(shè)置。其語(yǔ)法結(jié)構(gòu)如下。2216.5 表單事件表單事件是指在表單上做某一動(dòng)作時(shí)所觸發(fā)的事件。表單相關(guān)事件包括有很多復(fù)雜的Jav

8、aScript程序，本節(jié)將以最簡(jiǎn)單的實(shí)例來(lái)講述各個(gè)表單相關(guān)事件的用法和設(shè)置。2316.5.1 選定元素失去焦點(diǎn)事件onBlur 選定元素失去焦點(diǎn)事件是指當(dāng)選定元素停止作為用戶(hù)交互的焦點(diǎn)時(shí)觸發(fā)該事件，可以通過(guò)onBlur來(lái)進(jìn)行設(shè)置。onBlur用得最多的是判斷輸入框里的文本內(nèi)容是否符合表單的要求。其語(yǔ)法結(jié)構(gòu)如下。2416.5.2 選定元素發(fā)生改變事件onChange 選定元素發(fā)生改變事件是指當(dāng)改變頁(yè)面中的元素時(shí)觸發(fā)該事件，例如改變表單中的數(shù)據(jù)時(shí)，可以通過(guò)onChange來(lái)進(jìn)行設(shè)置。onChange和onBlur一樣，都是要鼠標(biāo)在元素外點(diǎn)擊時(shí)才能觸發(fā)事件。其語(yǔ)法結(jié)構(gòu)如下。2516.5.3 選定元素

9、獲得焦點(diǎn)事件onFocus選定元素獲得焦點(diǎn)事件是指當(dāng)元素獲得焦點(diǎn)時(shí)觸發(fā)該事件，可以通過(guò)onFocus來(lái)進(jìn)行設(shè)置。onFocus用得最多的是，當(dāng)鼠標(biāo)點(diǎn)擊輸入框時(shí)，輸入框會(huì)發(fā)生一些變化。其語(yǔ)法結(jié)構(gòu)如下。2616.5.4 表單重置事件onReset表單重置事件是指當(dāng)表單中元素被重置時(shí)觸發(fā)的事件，可以通過(guò)onReset來(lái)進(jìn)行設(shè)置。其語(yǔ)法結(jié)構(gòu)如下。2716.5.5 表單提交事件onSubmit表單提交事件是指當(dāng)表單中的元素被提交時(shí)觸發(fā)的事件，也就是當(dāng)點(diǎn)擊提交按鈕觸時(shí)觸發(fā)的事件，可以通過(guò)onSubmit來(lái)進(jìn)行設(shè)置。其語(yǔ)法結(jié)構(gòu)如下。2816.6 滾動(dòng)字幕事件滾動(dòng)字幕事件是指在活動(dòng)字幕里做某一動(dòng)作時(shí)所觸發(fā)的事

10、件。滾動(dòng)字幕事件包括有很多復(fù)雜的JavaScript程序，本節(jié)將以簡(jiǎn)單的實(shí)例來(lái)講述各個(gè)滾動(dòng)字幕事件的用法和設(shè)置。2916.6.1 字幕內(nèi)容滾動(dòng)至顯示范圍之外事件onBounce字幕內(nèi)容滾動(dòng)至顯示范圍之外事件是指當(dāng)滾動(dòng)字幕里的內(nèi)容滾動(dòng)到顯示范圍之外時(shí)觸發(fā)的事件，可以通過(guò)onBounce來(lái)進(jìn)行設(shè)置。由于onBounce是用來(lái)設(shè)置滾動(dòng)字幕的，所以該事件要放在標(biāo)簽里面。其語(yǔ)法結(jié)構(gòu)如下。3016.6.2內(nèi)容顯示完成后事件onFinish內(nèi)容顯示完成后事件是指當(dāng)滾動(dòng)字幕中需要顯示的內(nèi)容已全部顯示完成后觸發(fā)的事件，可以通過(guò)onFinish來(lái)進(jìn)行設(shè)置。由于onFinish是用來(lái)設(shè)置滾動(dòng)字幕的，所以該事件要放在

11、標(biāo)簽里面。其語(yǔ)法結(jié)構(gòu)如下。3116.6.3 開(kāi)始顯示內(nèi)容事件onStart開(kāi)始顯示內(nèi)容事件是指當(dāng)滾動(dòng)字幕需要顯示的內(nèi)容開(kāi)始顯示時(shí)觸發(fā)的事件，可以通過(guò)onStart來(lái)進(jìn)行設(shè)置。由于onStart是用來(lái)設(shè)置滾動(dòng)字幕的，所以該事件要放在標(biāo)簽里面。其語(yǔ)法結(jié)構(gòu)如下。3216.7 編輯事件編輯事件是指當(dāng)頁(yè)面內(nèi)容被編輯時(shí)觸發(fā)的事件，例如復(fù)制、粘貼等。編輯事件包括有很多復(fù)雜的JavaScript程序，本節(jié)將以簡(jiǎn)單的實(shí)例來(lái)講述各個(gè)編輯事件的用法和設(shè)置。3316.7.1 出現(xiàn)菜單事件onContextMenu出現(xiàn)菜單事件是指當(dāng)按下鼠標(biāo)右鍵出現(xiàn)菜單時(shí)或者通過(guò)鍵盤(pán)的按鍵打開(kāi)頁(yè)面菜單時(shí)觸發(fā)的事件，可以通過(guò)onConte

12、xtMenu進(jìn)行設(shè)置。其語(yǔ)法結(jié)構(gòu)如下。3416.7.2 內(nèi)容被復(fù)制后事件onCopy內(nèi)容被復(fù)制后事件是指當(dāng)頁(yè)面中的內(nèi)容被復(fù)制后觸發(fā)的事件，可以通過(guò)onCopy來(lái)進(jìn)行設(shè)置?？梢酝ㄟ^(guò)這個(gè)事件用來(lái)防止頁(yè)面內(nèi)容被復(fù)制。其語(yǔ)法形式如下。3516.7.3 內(nèi)容被剪切時(shí)事件onCut內(nèi)容被剪切時(shí)事件是指頁(yè)面中被選擇的內(nèi)容被剪切時(shí)觸發(fā)的事件，可以通過(guò)onCut來(lái)進(jìn)行設(shè)置?？梢酝ㄟ^(guò)這個(gè)事件用來(lái)來(lái)防止頁(yè)面內(nèi)容被剪切。其語(yǔ)法結(jié)構(gòu)如下。3616.7.4 鼠標(biāo)拖動(dòng)時(shí)事件onDrag鼠標(biāo)拖動(dòng)時(shí)事件是指頁(yè)面中選擇的內(nèi)容被鼠標(biāo)拖動(dòng)時(shí)觸發(fā)的事件，可以通過(guò)onDrag來(lái)進(jìn)行設(shè)置?？梢酝ㄟ^(guò)這個(gè)事件來(lái)防止頁(yè)面內(nèi)容被拖動(dòng)。其語(yǔ)法結(jié)構(gòu)如

13、下。3716.7.5 失去鼠標(biāo)移動(dòng)所形成選擇焦點(diǎn)時(shí)事件onLoseCapture失去鼠標(biāo)移動(dòng)所形成選擇焦點(diǎn)時(shí)事件是指用鼠標(biāo)在頁(yè)面中選擇內(nèi)容后松開(kāi)鼠標(biāo)時(shí)觸發(fā)的事件，可以通過(guò)onLoseCapture來(lái)進(jìn)行設(shè)置。其語(yǔ)法結(jié)構(gòu)如下。3816.7.6 內(nèi)容被粘貼時(shí)事件onPaste內(nèi)容被粘貼時(shí)事件是指當(dāng)復(fù)制的內(nèi)容被粘貼在頁(yè)面中時(shí)觸發(fā)的事件，可以通過(guò)onPaste來(lái)進(jìn)行設(shè)置。可以通過(guò)這個(gè)事件來(lái)防止頁(yè)面內(nèi)容里使用粘貼。其語(yǔ)法結(jié)構(gòu)如下。3916.7.7 內(nèi)容被選擇時(shí)事件onSelect內(nèi)容被選擇時(shí)事件是指當(dāng)頁(yè)面中的內(nèi)容被選擇時(shí)觸發(fā)的事件，可以通過(guò)onSelect來(lái)進(jìn)行設(shè)置。由于它是用來(lái)控制頁(yè)面的內(nèi)容的，所以o

14、nSelect應(yīng)該放在標(biāo)簽里面。其語(yǔ)法形式如下。4016.7.8 內(nèi)容選擇將開(kāi)始發(fā)生時(shí)事件onSelectStart HTML內(nèi)容選擇將開(kāi)始發(fā)生時(shí)事件是指當(dāng)頁(yè)面內(nèi)容將要開(kāi)始被選擇時(shí)觸發(fā)的事件，可以通過(guò)onSelectStart來(lái)進(jìn)行設(shè)置。由于它是用來(lái)控制頁(yè)面的內(nèi)容的，所以onSelectStart應(yīng)該放在標(biāo)簽里面。語(yǔ)法形式如下。4116.8 數(shù)據(jù)綁定數(shù)據(jù)綁定是指頁(yè)面內(nèi)容和數(shù)據(jù)源之間發(fā)生某一動(dòng)作而觸發(fā)的事件。我們都知道大多數(shù)的數(shù)據(jù)源都來(lái)自數(shù)據(jù)庫(kù)，因此數(shù)據(jù)綁定所觸發(fā)的事件需要和數(shù)據(jù)庫(kù)進(jìn)行綁定才可以使用。4216.8 數(shù)據(jù)綁定1數(shù)據(jù)完成由數(shù)據(jù)源到對(duì)象的傳送事件onAfterUpdate數(shù)據(jù)完成由數(shù)據(jù)

15、源到對(duì)象的傳送事件是指當(dāng)數(shù)據(jù)完成從數(shù)據(jù)源傳送到響應(yīng)的頁(yè)面元素時(shí)所觸發(fā)的事件，可以通過(guò)onAfterUpdate來(lái)進(jìn)行設(shè)置。2數(shù)據(jù)來(lái)源發(fā)生變化時(shí)事件onCellChange數(shù)據(jù)來(lái)源發(fā)生變化時(shí)事件是指當(dāng)數(shù)據(jù)的來(lái)源發(fā)生變化時(shí)觸發(fā)的事件，可以通過(guò)onCellChange來(lái)進(jìn)行設(shè)置。3數(shù)據(jù)接收完成時(shí)事件onDataAvailable觸發(fā)數(shù)據(jù)接收完成時(shí)事件是指當(dāng)數(shù)據(jù)從數(shù)據(jù)源接受完成時(shí)觸發(fā)的事件，可以通過(guò)onDataAvailable來(lái)進(jìn)行設(shè)置。4316.8 數(shù)據(jù)綁定4數(shù)據(jù)源發(fā)生變化時(shí)事件onDatasetChanged數(shù)據(jù)源發(fā)生變化時(shí)事件是指當(dāng)提供數(shù)據(jù)的數(shù)據(jù)源發(fā)生變化時(shí)觸發(fā)的事件，可以通過(guò)onDatase

16、tChanged來(lái)進(jìn)行設(shè)置。5全部有效數(shù)據(jù)讀取完畢事件onDatasetComplete全部有效數(shù)據(jù)讀取完畢事件是指當(dāng)頁(yè)面中的有效數(shù)據(jù)全部讀取完畢時(shí)觸發(fā)的事件，可以通過(guò)onDatasetComplete來(lái)進(jìn)行設(shè)置。4416.8 數(shù)據(jù)綁定6取消數(shù)據(jù)傳送事件onBeforeUpdate取消數(shù)據(jù)傳送事件是指onBeforeUpdate事件可以用來(lái)取消數(shù)據(jù)傳送，可以通過(guò)onBeforeUpdate來(lái)進(jìn)行設(shè)置。7.取消數(shù)據(jù)傳送時(shí)，替代onAfterUpdate事件onErrorUpdate取消數(shù)據(jù)傳送時(shí)，替代onAfterUpdate事件是指當(dāng)使用onBeforeUpdate事件觸發(fā)取消了數(shù)據(jù)傳送時(shí)，o

17、nErrorUpdate事件用來(lái)代替onAfterUpdate事件。4516.9 外部事件外部事件是指在頁(yè)面內(nèi)容范圍之外做某一動(dòng)作時(shí)而觸發(fā)的事件。外部事件包括有很多復(fù)雜的JavaScript程序，本節(jié)將以簡(jiǎn)單的實(shí)例來(lái)講述各個(gè)外部事件的用法和設(shè)置。4616.9.1 文檔被打印后事件onAfterPrint文檔被打印后事件是指當(dāng)頁(yè)面內(nèi)容被打印完成后所觸發(fā)的事件，可以通過(guò)onAfterPrint來(lái)進(jìn)行設(shè)置。由于它是用來(lái)打印頁(yè)面的內(nèi)容的，所以onAfterPrint應(yīng)該放在標(biāo)簽里面。其語(yǔ)法結(jié)構(gòu)如下。4716.9.2 文檔即將被打印時(shí)事件onBeforePrint文檔即將被打印時(shí)事件是指當(dāng)頁(yè)面內(nèi)容將要被打印時(shí)所觸發(fā)的事件，可以通過(guò)onBeforePrint來(lái)進(jìn)行設(shè)置。由于它是用來(lái)打印頁(yè)面的內(nèi)容的，所以onBeforePrint應(yīng)該放在標(biāo)簽里面。其語(yǔ)法結(jié)構(gòu)如下。4816.9.3 濾鏡效果發(fā)生變化時(shí)事件onFilterChange濾鏡效果發(fā)生變化時(shí)事件是指當(dāng)頁(yè)面內(nèi)容的濾鏡效果發(fā)生改變時(shí)觸發(fā)的事件，可以通過(guò)onFilterChange來(lái)進(jìn)行設(shè)置。其語(yǔ)法結(jié)構(gòu)如下。4916.9.4 按下F1或者幫助選擇時(shí)事件onHelp HTML按下F1或者幫助選擇時(shí)事件是指在頁(yè)面中按下F1或者瀏覽器中選擇幫助菜單時(shí)所觸發(fā)的事件，可以通過(guò)onHelp來(lái)進(jìn)行設(shè)置。由于它是用來(lái)控制頁(yè)面的內(nèi)