1、第五章 事件和事件處理,本章結(jié)構(gòu),理解事件 處理事件 JavaScript中的事件處理 事件對(duì)象,理解事件,事件概述 事件是瀏覽器響應(yīng)用戶操作的機(jī)制，說明了用戶與Web頁面交互時(shí)產(chǎn)生的操作。 事件可以向?yàn)g覽器表明有操作發(fā)生，需要瀏覽器處理。 瀏覽器可以監(jiān)聽事件，在事件發(fā)生時(shí)做出反應(yīng)，進(jìn)行相應(yīng)的處理工作。這種監(jiān)聽、響應(yīng)事件并進(jìn)行處理的過程被稱為事件處理。 有些事件可以被瀏覽器自動(dòng)監(jiān)聽，由瀏覽器自動(dòng)觸發(fā)，例如：窗體的load事件。 有些事件是用來執(zhí)行某段代碼以響應(yīng)用戶請(qǐng)求的，由人工編寫程序進(jìn)行定義的，當(dāng)特定的事件發(fā)生時(shí)，執(zhí)行這個(gè)事件對(duì)應(yīng)的代碼，以完成預(yù)期的事件處理。,理解事件,事件類型 JavaS

2、cript支持大量的事件類型，而且針對(duì)不同對(duì)象，同一操作也會(huì)產(chǎn)生不同的事件結(jié)果。,部分JavaScript事件,理解事件,事件處理器 當(dāng)事件發(fā)生時(shí)，程序就會(huì)執(zhí)行用于響應(yīng)事件的JavaScript代碼，響應(yīng)特定事件的代碼被稱為事件處理器。 事件處理器的代碼包含在相應(yīng)的HTML標(biāo)記里面，作為該標(biāo)記的屬性，其語法格式如下： 事件處理器名稱與事件本身的名稱大體相同，只是在事件名稱前面加上了“on”，例如click事件的事件處理器為onClick。 一個(gè)完整的例子： ,理解事件,事件處理器的屬性,處理事件,通過HTML屬性處理事件 事件處理器是作為HTML的屬性值來表示和應(yīng)用的，例如： 除了直接使用Ja

3、vaScript代碼串，更好的方法是通過事件處理器調(diào)用函數(shù)，通過函數(shù)完成事件處理。, function printMessage(message) alert(message); ,定義函數(shù),調(diào)用函數(shù),處理事件,通過JavaScript屬性處理事件 將事件處理器作為JavaScript的屬性，使程序像操作JavaScript屬性一樣來處理事件。 用HTML屬性指定的事件處理器為： 同樣的功能通過JavaScript屬性指定事件處理器來實(shí)現(xiàn)： Button.onclick= function() alert(按鈕的click事件被觸發(fā)！); 使用JavaS

4、cript的屬性來表示事件處理器的好處： 減少了HTML和JavaScript的混合使用，簡(jiǎn)潔明了。 事件處理器的代碼不必是確定的，可以根據(jù)需要?jiǎng)討B(tài)創(chuàng)建和修改。,JavaScrpt中的事件處理,處理鏈接事件 與鏈接相關(guān)的事件一共有九個(gè)，常用的有click事件，mouseOver事件和mouseOut事件等等。下面是mouseOver事件舉例：,function printMessage(message) alert(message); ,定義函數(shù),調(diào)用函數(shù), 請(qǐng)把鼠標(biāo)放過來， 看看會(huì)發(fā)生什么事情：） ,同一個(gè)鏈接還可以注冊(cè)多個(gè)事件處理器，當(dāng)發(fā)生不同的事件的時(shí)候，就調(diào)用相應(yīng)的事件處理器執(zhí)行處理程

5、序。,例1: function printmessage(message) alert(message); 移動(dòng)鼠標(biāo)，看看會(huì)發(fā)生什么事情 ,JavaScrpt中的事件處理,處理窗口事件 窗口事件主要用來處理普通的HTML文檔以及包含幀結(jié)構(gòu)的HTML文檔，常用的有l(wèi)oad、unload、blur、focus等事件。,定義函數(shù),function loadHandle() alert(窗口執(zhí)行了load事件！); function unloadHandle() alert(窗口執(zhí)行了unload事件！); ,例2: ,調(diào)用函數(shù),JavaScrpt中的事件處理,處理圖形事件 圖形事件用于了解圖形的加載

6、狀況、判斷加載過程中是否發(fā)生中斷或者錯(cuò)誤，從而構(gòu)建豐富多彩的Web應(yīng)用。下面是關(guān)于圖形load事件的例子：,定義函數(shù),function imageLoadHandle() alert(圖形加載完成！); ,調(diào)用函數(shù),例3: ,JavaScrpt中的事件處理,處理圖形映射事件 圖形映射是一類比較特殊的圖形事件，由分布在不同區(qū)域的圖形組成，用戶單擊圖形的某個(gè)區(qū)域，便可以連接與該區(qū)域相關(guān)的URL。,定義函數(shù),調(diào)用函數(shù),function messageHandle() alert(您點(diǎn)擊的是圖形的第二個(gè)映射區(qū)！); ,例4: ,JavaScrpt中的事件處理,處理窗體事件 在JavaScript實(shí)際應(yīng)

7、用中，最常處理的事件就是窗體事件。 窗體提供了許多圖形用戶界面控件，幫助用戶完成Web交互，例如：文本框、單選框、復(fù)選框、按鈕等等。,定義函數(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.p

8、assWord.value) alert(用戶密碼不能為空！); else alert(您填寫正確！); ,JavaScrpt中的事件處理,定義函數(shù),function cancelHandle() document.test.userName.value=; document.test.passWord.value=; ,調(diào)用函數(shù),例5: Example:窗體事件 用戶名稱: 用戶密碼: alert(message); onerror=errorHandler;,實(shí)現(xiàn)錯(cuò)誤處理功能的關(guān)鍵是通過下面的代碼把windows的onerror屬性設(shè)置為錯(cuò)誤事件處理器： onerror=errorHand

9、ler;,JavaScrpt中的事件處理,處理錯(cuò)誤事件 如果將錯(cuò)誤事件處理函數(shù)的名稱賦給了windows對(duì)象的onerror屬性，那么發(fā)生的錯(cuò)誤將會(huì)被處理。例如點(diǎn)擊按鈕時(shí)調(diào)用不存在的函數(shù)okHandle()： ,事件對(duì)象,JavaScript1.2引入了event對(duì)象作為提供事件細(xì)節(jié)信息的機(jī)制，由于event對(duì)象包含了若干存儲(chǔ)事件細(xì)節(jié)信息的屬性，所以可以通過訪問event對(duì)象的屬性來獲取所發(fā)生事件的詳細(xì)信息。 Netscape公司和微軟公司在其瀏覽器軟件中都定義了event對(duì)象，但是在兩家公司瀏覽器軟件Navigator和Internet Explorer中，event對(duì)象的屬性幾乎完全不同。

10、 在上面兩種瀏覽器中，除了event對(duì)象的屬性不同以外，事件處理器使用event對(duì)象的方法也存在很大差異： Internet Explorer將event對(duì)象定義為全局性的，可以從事件處理器中直接訪問。P101 表5-3 Internet Explorer中的Event對(duì)象屬性 Navigator瀏覽器將event對(duì)象作為參數(shù)傳遞給事件處理器。,function showLocation() alert(光標(biāo)的水平位置:+event.screenX+光標(biāo)的垂直位置+event.screenY); ,將光標(biāo)位置通過提示框中輸出：,用戶名稱: ,調(diào)用： showLocation函數(shù),本章小結(jié),事件

11、是瀏覽器響應(yīng)用戶操作的機(jī)制，說明了用戶與Web頁面交互時(shí)產(chǎn)生的操作。 JavaScript中的事件大都與HTML標(biāo)記相關(guān)，都是在用戶操作頁面元素是觸發(fā)的。 JavaScript支持大量的事件類型，而且針對(duì)不同對(duì)象，同一操作也會(huì)產(chǎn)生不同的事件結(jié)果。 當(dāng)JavaScript中定義的事件發(fā)生時(shí)，程序就會(huì)執(zhí)行用于響應(yīng)事件的JavaScript代碼，響應(yīng)特定事件的代碼被稱為事件處理器。 JavaScript的事件處理分為兩個(gè)步驟：首先定義可以被JavaScript識(shí)別和處理的事件，然后由程序員使用標(biāo)準(zhǔn)的方法將事件和事件處理代碼連接起來。 JavaScript 1.2引入了event對(duì)象作為提供事件細(xì)節(jié)信息的機(jī)制，由于event對(duì)象包含了若干存儲(chǔ)著事件細(xì)節(jié)信息的屬性，所以可以通過訪問event對(duì)