JavaScript-5

1、軟件職業(yè)技術(shù)學(xué)院5.1JavaScriptJavaScript程序設(shè)計程序設(shè)計軟件職業(yè)技術(shù)學(xué)院5.2第五章第五章 事件和事件處理事件和事件處理軟件職業(yè)技術(shù)學(xué)院5.3本章結(jié)構(gòu)本章結(jié)構(gòu)u理解事件理解事件u處理事件處理事件uJavaScript中的事件處理中的事件處理u事件對象事件對象軟件職業(yè)技術(shù)學(xué)院5.4理解事件理解事件u事件概述事件概述n事件是瀏覽器響應(yīng)用戶操作的機制，說明了用戶與事件是瀏覽器響應(yīng)用戶操作的機制，說明了用戶與Web頁面交互頁面交互時產(chǎn)生的操作。時產(chǎn)生的操作。n事件可以向瀏覽器表明有操作發(fā)生，需要瀏覽器處理。事件可以向瀏覽器表明有操作發(fā)生，需要瀏覽器處理。n瀏覽器可以監(jiān)聽事件，在事

2、件發(fā)生時做出反應(yīng)，進(jìn)行相應(yīng)的處理瀏覽器可以監(jiān)聽事件，在事件發(fā)生時做出反應(yīng)，進(jìn)行相應(yīng)的處理工作。這種監(jiān)聽、響應(yīng)事件并進(jìn)行處理的過程被稱為事件處理。工作。這種監(jiān)聽、響應(yīng)事件并進(jìn)行處理的過程被稱為事件處理。n有些事件可以被瀏覽器自動監(jiān)聽，由瀏覽器自動觸發(fā)，例如：窗有些事件可以被瀏覽器自動監(jiān)聽，由瀏覽器自動觸發(fā)，例如：窗體的體的load事件。事件。n有些事件是用來執(zhí)行某段代碼以響應(yīng)用戶請求的，由人工編寫程有些事件是用來執(zhí)行某段代碼以響應(yīng)用戶請求的，由人工編寫程序進(jìn)行定義的，當(dāng)特定的事件發(fā)生時，執(zhí)行這個事件對應(yīng)的代碼序進(jìn)行定義的，當(dāng)特定的事件發(fā)生時，執(zhí)行這個事件對應(yīng)的代碼，以完成預(yù)期的事件處理。，以完成

3、預(yù)期的事件處理。軟件職業(yè)技術(shù)學(xué)院5.5理解事件理解事件u事件類型事件類型nJavaScript支持大量的事件類型，而且針對不同對象，同一操作也支持大量的事件類型，而且針對不同對象，同一操作也會產(chǎn)生不同的事件結(jié)果。會產(chǎn)生不同的事件結(jié)果。HTML組件JavaScript事件鏈接ClickDbclickmouseDownmouseUpmouseOvermouseOutkeyDownkeyUpkeyPressHTML組件JavaScript事件單行文本域blurfocuschangeselect按鈕clickblurfocusmouseDownmouseUpHTML組件JavaScript事件重置cl

4、ickblurfocus單選按鈕clickblurfocus復(fù)選框clickblurfocusu部分部分JavaScript事件事件軟件職業(yè)技術(shù)學(xué)院5.6理解事件理解事件u事件處理器事件處理器n當(dāng)事件發(fā)生時，程序就會執(zhí)行用于響應(yīng)事件的當(dāng)事件發(fā)生時，程序就會執(zhí)行用于響應(yīng)事件的JavaScript代碼，響代碼，響應(yīng)特定事件的代碼被稱為事件處理器。應(yīng)特定事件的代碼被稱為事件處理器。n事件處理器的代碼包含在相應(yīng)的事件處理器的代碼包含在相應(yīng)的HTML標(biāo)記里面，作為該標(biāo)記的標(biāo)記里面，作為該標(biāo)記的屬性，其語法格式如下：屬性，其語法格式如下：n事件處理器名稱與事件本身的名稱大體相同，只是在事件名稱前事件處理器

5、名稱與事件本身的名稱大體相同，只是在事件名稱前面加上了面加上了“on”，例如，例如click事件的事件處理器為事件的事件處理器為onClick。n一個完整的例子：一個完整的例子：軟件職業(yè)技術(shù)學(xué)院5.7理解事件理解事件u事件處理器的屬性事件處理器的屬性事件處理屬性事件處理屬性相應(yīng)代碼的執(zhí)行相應(yīng)代碼的執(zhí)行onAbort取消圖片的加載onBlur文檔、窗口、框架或表單元素失去當(dāng)前輸入焦點onChange文本框、文本域、文件上傳或選項被修改或失去當(dāng)前輸入焦點onClick鏈接、客戶端圖片區(qū)域或表單元素被點擊onDbClick鏈接、客戶端圖片區(qū)域或文檔被雙擊onDragDrop在窗口或框架中拖拽某個對象

6、onError在圖片、窗口或框架加載時出錯onFocus文檔、窗口、框架或表單元素得到當(dāng)前輸入焦點onKeyDown用戶按下按鈕onKeyPress用戶按下并釋放鍵onKeyUp用戶釋放鍵onLoad加載圖片、文檔或框架事件處理屬性事件處理屬性相應(yīng)代碼的執(zhí)行相應(yīng)代碼的執(zhí)行onMouseDown用戶移動鼠標(biāo)onMouseMove鼠標(biāo)從客戶端圖片區(qū)域的鏈接區(qū)域移出onMouseOut鼠標(biāo)移到客戶端圖片區(qū)域的鏈接區(qū)域onMouseOver用戶釋放鼠標(biāo)按鈕onMouseUp用戶按下鼠標(biāo)按鈕onMove用戶移動窗口或框架onReset用戶點擊表單重置按鈕，重置表單onResize用戶調(diào)整窗口或框架大小o

7、nSelect在文本框或文本域中選擇文本onSubmit提交表單onUnload用戶退出文檔或框架軟件職業(yè)技術(shù)學(xué)院5.8處理事件處理事件u 通過通過HTML屬性處理事件屬性處理事件n事件處理器是作為事件處理器是作為HTML的屬性值來表示和應(yīng)用的，例如：的屬性值來表示和應(yīng)用的，例如： n除了直接使用除了直接使用JavaScript代碼串，更好的方法是通過事件處理器調(diào)代碼串，更好的方法是通過事件處理器調(diào)用函數(shù)，通過函數(shù)完成事件處理。用函數(shù)，通過函數(shù)完成事件處理。 function printMessage(message) alert(message); 定義函定義函數(shù)數(shù)調(diào)用函調(diào)用函數(shù)數(shù)軟件職業(yè)技

8、術(shù)學(xué)院5.9處理事件處理事件u通過通過JavaScript屬性處理事件屬性處理事件n將事件處理器作為將事件處理器作為JavaScript的屬性，使程序像操作的屬性，使程序像操作JavaScript屬屬性一樣來處理事件。性一樣來處理事件。 n用用HTML屬性指定的事件處理器為：屬性指定的事件處理器為：n同樣的功能通過同樣的功能通過JavaScript屬性指定事件處理器來實現(xiàn)：屬性指定事件處理器來實現(xiàn)：Button.onclick= function() alert(按鈕的click事件被觸發(fā)！);n使用使用JavaScript的屬性來表示事件處理器的好處：

9、的屬性來表示事件處理器的好處：減少了減少了HTML和和JavaScript的混合使用，簡潔明了。的混合使用，簡潔明了。事件處理器的代碼不必是確定的，可以根據(jù)需要動態(tài)創(chuàng)建和修改。事件處理器的代碼不必是確定的，可以根據(jù)需要動態(tài)創(chuàng)建和修改。軟件職業(yè)技術(shù)學(xué)院5.10JavaScrpt中的事件處理中的事件處理u處理鏈接事件處理鏈接事件n與鏈接相關(guān)的事件一共有九個，常用的有與鏈接相關(guān)的事件一共有九個，常用的有click事件，事件，mouseOver事件和事件和mouseOut事件等等。下面是事件等等。下面是mouseOver事件舉例：事件舉例：function printMessage(message)

10、alert(message);u定義函數(shù)定義函數(shù)u調(diào)用函數(shù)調(diào)用函數(shù) 請把鼠標(biāo)放過來， 看看會發(fā)生什么事情：） 軟件職業(yè)技術(shù)學(xué)院5.11JavaScrpt中的事件處理中的事件處理u處理窗口事件處理窗口事件n窗口事件主要用來處理普通的窗口事件主要用來處理普通的HTML文檔以及包含幀結(jié)構(gòu)的文檔以及包含幀結(jié)構(gòu)的HTML文檔，常用的有文檔，常用的有l(wèi)oad、unload、blur、focus等事件。等事件。u定義函數(shù)定義函數(shù)function loadHandle() alert(窗口執(zhí)行了load事件！);function unloadHandle() alert(窗口執(zhí)行了unload事件！); u調(diào)

11、用函數(shù)調(diào)用函數(shù)軟件職業(yè)技術(shù)學(xué)院5.12JavaScrpt中的事件處理中的事件處理u處理圖形事件處理圖形事件n圖形事件用于了解圖形的加載狀況、判斷加載過程中是否發(fā)生中圖形事件用于了解圖形的加載狀況、判斷加載過程中是否發(fā)生中斷或者錯誤，從而構(gòu)建豐富多彩的斷或者錯誤，從而構(gòu)建豐富多彩的Web應(yīng)用。下面是關(guān)于圖形應(yīng)用。下面是關(guān)于圖形load事件的例子：事件的例子： u定義函數(shù)定義函數(shù)function imageLoadHandle() alert(圖形加載完成！); u調(diào)用函數(shù)調(diào)用函數(shù) 軟件職業(yè)技術(shù)學(xué)院5.13JavaScrpt中的事件處理中的事件處理u處理圖形映射事件處理圖形映射事件n圖形映射是一類

12、比較特殊的圖形事件，由分布在不同區(qū)域的圖形圖形映射是一類比較特殊的圖形事件，由分布在不同區(qū)域的圖形組成，用戶單擊圖形的某個區(qū)域，便可以連接與該區(qū)域相關(guān)的組成，用戶單擊圖形的某個區(qū)域，便可以連接與該區(qū)域相關(guān)的URL。u定義函數(shù)定義函數(shù)u調(diào)用函數(shù)調(diào)用函數(shù)function messageHandle() alert(您點擊的是圖形的第二個映射區(qū)！); 軟件職業(yè)技術(shù)學(xué)院5.14JavaScrpt中的事件處理中的事件處理u處理窗體事件處理窗體事件n在在JavaScript實際應(yīng)用中，最常處理的事件就是窗體事件。實際應(yīng)用中，最常處理的事件就是窗體事件。n窗體提供了許多圖形用戶界面控件，幫助用戶完成窗體提供

13、了許多圖形用戶界面控件，幫助用戶完成Web交互，例交互，例如：文本框、單選框、復(fù)選框、按鈕等等。如：文本框、單選框、復(fù)選框、按鈕等等。u定義函數(shù)定義函數(shù)function checkValid(s) var len = s.length; for(var i=0; ilen; i+) if(s.charAt(i)!=) return false; return true;function okHandle() if(checkValid(document.test.userName.value) alert(用戶名稱不能為空！); else if(checkValid(document.test

14、.passWord.value) alert(用戶密碼不能為空！); else alert(您填寫正確！); 軟件職業(yè)技術(shù)學(xué)院5.15JavaScrpt中的事件處理中的事件處理u定義函數(shù)定義函數(shù)function cancelHandle() document.test.userName.value=; document.test.passWord.value=; u調(diào)用函數(shù)調(diào)用函數(shù) u處理窗體事件處理窗體事件軟件職業(yè)技術(shù)學(xué)院5.16JavaScrpt中的事件處理中的事件處理u處理窗體事件處理窗體事件n當(dāng)點擊當(dāng)點擊“確定確定”按鈕時，將判斷是否錄入用戶名稱和密碼，如果按鈕時，將判斷是否錄入用戶名

15、稱和密碼，如果兩者都錄入內(nèi)容將提示填寫正確，否則提示信息缺失；點擊兩者都錄入內(nèi)容將提示填寫正確，否則提示信息缺失；點擊“取取消消”按鈕將把用戶名稱文本框和用戶密碼文本框內(nèi)容清空。按鈕將把用戶名稱文本框和用戶密碼文本框內(nèi)容清空。軟件職業(yè)技術(shù)學(xué)院5.17JavaScrpt中的事件處理中的事件處理u處理錯誤事件處理錯誤事件nJavaScript1.1及其以后版本引入了及其以后版本引入了error事件，提供了在腳本執(zhí)行事件，提供了在腳本執(zhí)行過程中處理錯誤的功能。過程中處理錯誤的功能。n圖像、窗口以及框架對象有圖像、窗口以及框架對象有error事件，其中事件，其中image對象的對象的onError事件

16、處理器可以處理與加載圖形相關(guān)的錯誤，而事件處理器可以處理與加載圖形相關(guān)的錯誤，而windows對象的對象的onError事件處理器可以處理與加載文檔相關(guān)的錯誤。事件處理器可以處理與加載文檔相關(guān)的錯誤。n處理錯誤事件不同于處理其他事件，事件處理函數(shù)不需要自己編處理錯誤事件不同于處理其他事件，事件處理函數(shù)不需要自己編寫，而是由瀏覽器自動執(zhí)行，通過寫，而是由瀏覽器自動執(zhí)行，通過3個參數(shù)傳遞錯誤信息：第一個個參數(shù)傳遞錯誤信息：第一個參數(shù)描述所發(fā)生錯誤的信息；第二個參數(shù)是一個參數(shù)描述所發(fā)生錯誤的信息；第二個參數(shù)是一個URL，指明引起，指明引起錯誤的錯誤的JavaScript代碼所在的文檔；第三個參數(shù)是該

17、文檔中錯誤代代碼所在的文檔；第三個參數(shù)是該文檔中錯誤代碼所在行的行號。碼所在行的行號。軟件職業(yè)技術(shù)學(xué)院5.18JavaScrpt中的事件處理中的事件處理u處理錯誤事件處理錯誤事件u定義函數(shù)定義函數(shù)function errorHandler(errorMessage,url,line) var message= 錯誤信息： + errorMessage + n錯誤文檔的URL： + url + n錯誤的行號： + line; alert(message);onerror=errorHandler; u實現(xiàn)錯誤處理功能的關(guān)鍵是通過下面的代碼把實現(xiàn)錯誤處理功能的關(guān)鍵是通過下面的代碼把windows的

18、的onerror屬性屬性設(shè)置為錯誤事件處理器：設(shè)置為錯誤事件處理器：nonerror=errorHandler;軟件職業(yè)技術(shù)學(xué)院5.19JavaScrpt中的事件處理中的事件處理u處理錯誤事件處理錯誤事件n如果將錯誤事件處理函數(shù)的名稱賦給了如果將錯誤事件處理函數(shù)的名稱賦給了windows對象的對象的onerror屬屬性，那么發(fā)生的錯誤將會被處理。例如點擊按鈕時調(diào)用不存在的性，那么發(fā)生的錯誤將會被處理。例如點擊按鈕時調(diào)用不存在的函數(shù)函數(shù)okHandle()： 軟件職業(yè)技術(shù)學(xué)院5.20事件對象事件對象uJavaScript1.2引入了引入了event對象作為提供事件細(xì)節(jié)信息的機對象作為提供事件細(xì)節(jié)

19、信息的機制，由于制，由于event對象包含了若干存儲著事件細(xì)節(jié)信息的屬對象包含了若干存儲著事件細(xì)節(jié)信息的屬性，所以可以通過訪問性，所以可以通過訪問event對象的屬性來獲取所發(fā)生事對象的屬性來獲取所發(fā)生事件的詳細(xì)信息。件的詳細(xì)信息。uNetscape公司和微軟公司在其瀏覽器軟件中都定義了公司和微軟公司在其瀏覽器軟件中都定義了event對象，但是在兩家公司瀏覽器軟件對象，但是在兩家公司瀏覽器軟件Navigator和和Internet Explorer中，中，event對象的屬性幾乎完全不同。對象的屬性幾乎完全不同。u在上面兩種瀏覽器中，除了在上面兩種瀏覽器中，除了event對象的屬性不同以外，對

20、象的屬性不同以外，事件處理器使用事件處理器使用event對象的方法也存在很大差異：對象的方法也存在很大差異：nInternet Explorer將將event對象定義為全局性的，可以從事件處理對象定義為全局性的，可以從事件處理器中直接訪問。器中直接訪問。nNavigator瀏覽器將瀏覽器將event對象作為參數(shù)傳遞給事件處理器。對象作為參數(shù)傳遞給事件處理器。軟件職業(yè)技術(shù)學(xué)院5.21本章小結(jié)本章小結(jié)u事件是瀏覽器響應(yīng)用戶操作的機制，說明了用戶與事件是瀏覽器響應(yīng)用戶操作的機制，說明了用戶與Web頁面交互時產(chǎn)頁面交互時產(chǎn)生的操作。生的操作。uJavaScript中的事件大都與中的事件大都與HTML標(biāo)記相關(guān)，都是在用戶操作頁面元標(biāo)記相關(guān)，都是在用戶操作頁面元素是觸發(fā)的。素是觸發(fā)的。uJavaScript支持大量的事件類型，而且針對不同對象，同一操作也會支持大量的事件類型，而且針對不同對象，同一操作也會產(chǎn)生不同的事件結(jié)果。產(chǎn)生不同的事件結(jié)果。u當(dāng)當(dāng)JavaScript中定