基于任務(wù)驅(qū)動模式的JavaScript程序設(shè)計案例第3章JavaScript事件處理

1、第3章 JavaScript事件處理 基于任務(wù)驅(qū)動模式的基于任務(wù)驅(qū)動模式的JavaScriptJavaScript程程序設(shè)計案例第序設(shè)計案例第3 3章章 JavaScriptJavaScript事件事件處理處理第3章 JavaScript事件處理 第3章 JavaScript事件處理 第3章 JavaScript事件處理 第3章 JavaScript事件處理 第3章 JavaScript事件處理 第3章 JavaScript事件處理 鼠標(biāo)單擊頁面中名為“MyLinker”的文本鏈接，其默認(rèn)操作是瀏覽器載入該鏈接的 href 屬性對應(yīng)的 URL 地址(本例中為“http:/ onclick=ja

2、vascript:this.href=http:/ 上述事件處理器取代了瀏覽器默認(rèn)的事件處理器，將頁面引導(dǎo)至 URL 地址為“http:/ 第3章 JavaScript事件處理 現(xiàn)代事件模型中引入Event對象，它包含其他對象使用的常量和方法。當(dāng)事件發(fā)生后，產(chǎn)生臨時的Event對象實例，并附加當(dāng)前事件的信息如鼠標(biāo)定位、事件類型等，然后傳遞給相關(guān)的事件處理器進(jìn)行處理。事件處理完畢后，該臨時Event對象實例所占據(jù)的內(nèi)存空間被釋放出來，瀏覽器便可以等待其他事件的出現(xiàn)并進(jìn)行處理。如果短時間內(nèi)發(fā)生的事件較多，瀏覽器按事件發(fā)生的順序依次執(zhí)行。第3章 JavaScript事件處理 事件發(fā)生的場合很多，包括

3、瀏覽器自身狀態(tài)的改變和頁面中的按鈕、鏈接、圖片、層等。同時根據(jù)DOM模型，文本也可以作為對象并響應(yīng)相關(guān)動作，如鼠標(biāo)雙擊、文本被選擇等。事件的處理方法與結(jié)果同瀏覽器環(huán)境有很大的關(guān)系，但總的來說，瀏覽器的版本越新，支持的事件處理器就越多、越完善?；诖?，在編寫JavaScript腳本時，要充分考慮瀏覽器的兼容性，以編寫適合大多數(shù)瀏覽器的腳本語言。第3章 JavaScript事件處理 3.3 HTML文檔事件文檔事件3.3.1 事件綁定事件綁定HTML文檔將元素的常用事件(如onclick、onmouseover等)當(dāng)作屬性捆綁在HTML元素上，當(dāng)該元素的特定事件發(fā)生時，對應(yīng)于此特定事件的事件處理器

4、就被執(zhí)行，并將處理結(jié)果返回給瀏覽器。事件捆綁使得特定的代碼被放置在所處對象的事件處理器中。考察如下代碼： MyLinker 第3章 JavaScript事件處理 上述代碼為“MyLinker”文本鏈接定義了一個Click 事件的處理器，返回警告框“You have Clicked the link!” 。 同樣，也可將該事件處理器獨立出來，編成單獨的函數(shù)來實現(xiàn)同樣的功能。將下列代碼加入文檔的和標(biāo)記對之間： MyLinker 自定義的函數(shù) MyClick()實現(xiàn)代碼如下： function MyClick() alert(You have Clicked the link!); 第3章 Java

5、Script事件處理 鼠標(biāo)單擊“MyLinker鏈接后，瀏覽器調(diào)用自定義的Click事件處理器，并將結(jié)果(警告框“You have Clicked the link!)返回給瀏覽器。由事件處理器的實現(xiàn)形式來看，標(biāo)記的onclick事件與其href屬性的地位均等，實現(xiàn)了HTML中的事件捆綁策略。3.3.2 瀏覽器事件瀏覽器事件指載入文檔直到該文檔被關(guān)閉期間的瀏覽器事件，如瀏覽器載入文檔事件onload、關(guān)閉文檔事件onunload、失去焦點事件onblur、獲得焦點事件onfocus等?？疾烊缦麓a：第3章 JavaScript事件處理 window.onload = function () v

6、ar msg=nwindow.load事件 : nn; msg+= 瀏覽器載入了文檔!; alert(msg); window.onfocus = function () var msg=nwindow.onfocus 事件 : nn; msg+= 瀏覽器取得了焦點!; alert(msg); window.onblur = function () 第3章 JavaScript事件處理 var msg=nwindow.onblur 事件 : nn; msg+= 瀏覽器失去了焦點!; alert(msg); window.onscroll = function () var msg=nwindo

7、w.onscroll 事件 : nn; msg+= 用戶拖動了滾動條!; alert(msg); window.onresize = function () var msg=nwindow.onresize 事件 : nn; msg+= 用戶改變了窗口尺寸!; alert(msg); 第3章 JavaScript事件處理 將上述源程序保存為*.html(或*.htm)文檔，雙擊該文檔后系統(tǒng)調(diào)用默認(rèn)的瀏覽器進(jìn)行瀏覽。當(dāng)載入該文檔時，觸發(fā)window.load事件，彈出警告框如圖3-2所示。圖3-2 第3章 JavaScript事件處理 當(dāng)把焦點給該文檔頁面時，觸發(fā)window.onfocus事件

8、，彈出警告框如圖3-3所示。圖3-3 第3章 JavaScript事件處理 當(dāng)該頁面失去焦點時，觸發(fā)window.blur事件，彈出警告框如圖3-4所示。圖3-4 第3章 JavaScript事件處理 當(dāng)用戶拖動滾動條時，觸發(fā)window.onscroll事件，彈出警告框如圖3-5所示。 圖3-5 第3章 JavaScript事件處理 當(dāng)用戶改變文檔頁面大小時，觸發(fā)window.onresize事件，彈出警告框如圖3-6所示。瀏覽器事件一般用于處理窗口定位、設(shè)置定時器或者根據(jù)用戶喜好設(shè)定頁面層次和內(nèi)容等場合，且在頁面的交互性、動態(tài)性方面使用較為廣泛。 圖3-6第3章 JavaScript事件處

9、理 3.3.3 HTML元素事件元素事件頁面載入后，用戶與頁面的交互主要指發(fā)生在(如按鈕、鏈接、表單、圖片等)HTML元素上的用戶動作，以及該頁面對此動作作出的響應(yīng)上。如簡單的鼠標(biāo)單擊按鈕事件：元素為button、事件為click、事件處理器為onclick()。了解了該事件的相關(guān)信息，程序員就可以編寫其接口的事件處理程序(也稱事件處理器)，從而實現(xiàn)諸如表單驗證、文本框內(nèi)容選擇等功能。HTML文檔中元素對應(yīng)的事件因元素類型而異，表3-1列出了當(dāng)前通用版本瀏覽器上支持的常用事件。第3章 JavaScript事件處理 表表3-1第3章 JavaScript事件處理 表3-1總結(jié)了JavaScrip

10、t定義的通用瀏覽器常用事件， HTML文檔中事件捆綁特性決定了程序員可以將這些事件當(dāng)作目標(biāo)的屬性，在使用過程中只需修改其屬性值即可。考察如下文本框各事件的測試代碼： function MyBlur() var msg=n 文本框 onblur()事件 : nn; msg+= 文本框失去了當(dāng)前輸入焦點!; alert(msg); function MyFocus() var msg=n 文本框 onfocus()事件 : nn; 第3章 JavaScript事件處理 msg+= 文本框獲得了當(dāng)前輸入焦點!; alert(msg); function MyChange() var msg=n 文本

11、框 onchange()事件 : nn; msg+= 文本框的內(nèi)容發(fā)生了改變!; alert(msg); function MySelect() var msg=n 文本框 onselect()事件 : nn; msg+= 選擇了文本框中的某段文本!; alert(msg); 第3章 JavaScript事件處理 程序運行后，根據(jù)用戶的頁面動作觸發(fā)不同的事件處理器(即對應(yīng)的函數(shù))。 鼠標(biāo)點擊文本框外的其他文檔區(qū)域后，文本框失去當(dāng)前輸入焦點，觸發(fā) MyBlur()函數(shù)，彈出警告框如圖 3-7 所示。 第3章 JavaScript事件處理 圖3-7第3章 JavaScript事件處理 鼠標(biāo)點擊文本

12、框后，文本框獲得當(dāng)前輸入焦點，觸發(fā)MyFocus()函數(shù)，彈出警告框如圖3-8所示。圖3-8第3章 JavaScript事件處理 修改文本框的文本后，鼠標(biāo)在文本框外文檔中任意位置點擊，觸發(fā)MyBlur()函數(shù)的同時，觸發(fā)MyChange()函數(shù)，彈出警告框如圖3-9所示。圖3-9第3章 JavaScript事件處理 在文本框獲得焦點后，用鼠標(biāo)選擇某段文本，觸發(fā)MySelect()函數(shù)，彈出警告框如圖3-10所示。HTML元素事件在表單提交、在線辦公、防止網(wǎng)站文章被復(fù)制、禁止下載網(wǎng)頁中圖片等方面應(yīng)用十分廣泛，其主要是能有效識別用戶的動作并做出相應(yīng)的反響，如彈出警告框、執(zhí)行window.close

13、()方法關(guān)閉頁面等操作。圖3-10第3章 JavaScript事件處理 3.3.4 獲得頁面元素獲得頁面元素在對事件進(jìn)行處理之前，我們先來了解一下如何獲得在對事件進(jìn)行處理之前，我們先來了解一下如何獲得頁面中的某個特定元素，以便對該元素進(jìn)行簡單的操作。頁面中的某個特定元素，以便對該元素進(jìn)行簡單的操作。在在HTML4版本中添加了版本中添加了HTML元素的元素的id屬性來定位文檔對屬性來定位文檔對象，根本上每一個頁面元素都可以設(shè)置象，根本上每一個頁面元素都可以設(shè)置id屬性，無論是屬性，無論是、標(biāo)記，或者是表單元素標(biāo)記，或者是表單元素等等，通過調(diào)用等等，通過調(diào)用document對象的對象的getEle

14、mentById()方法可以獲得該元素，語方法可以獲得該元素，語法如下所示：法如下所示：var elm = document.getElementById(id); 上述方法以元素的 id 屬性值作為參數(shù)，返回值則是通過該id 獲得的對應(yīng)頁面元素，接著可以操作該頁面元素。 第3章 JavaScript事件處理 我們來看下面這個簡單的例子： function changeSize() var inp = document.getElementById(txt); inp.size += 5; 上述代碼中，通過調(diào)用 document 對象的 getElementById()方法，傳入頁面文本框的

15、id 值 txt，就可以獲得該文本框?qū)ο?，接著將該文本框?size 屬性累加 5，即每點擊該按鈕一次，該文本框的長度就會加 5。 第3章 JavaScript事件處理 3.4 JavaScript如何處理事件如何處理事件3.4.1 匿名函數(shù)匿名函數(shù)匿名函數(shù)的方式即使用Function對象構(gòu)造匿名的函數(shù)，并將其方法復(fù)制給事件，此時該匿名的函數(shù)成為該事件的事件處理器。考察如下代碼： Sample Page! 第3章 JavaScript事件處理 單擊“事件測試”按鈕，通過匿名函數(shù)處理事件 document.getElementById(MyButton).onclick=new Function

16、() alert(Your Have clicked me!); 第3章 JavaScript事件處理 程序運行結(jié)果如圖3-11所示。圖3-11第3章 JavaScript事件處理 上述代碼段中的關(guān)鍵代碼為： document.getElementById(MyButton).onclick=new Function() alert(Your Have clicked me!); 此句是把名為“MyButton”元素的 click 動作的事件處理器設(shè)置為新生成的 Function對象(即該匿名函數(shù))的匿名實例。 鼠標(biāo)單擊該按鈕后，響應(yīng)單擊事件，返回警告框。 第3章 JavaScript事件處理

17、 3.4.2 顯式聲明顯式聲明設(shè)置事件處理器時，也可不使用匿名函數(shù)，而是將該事件的處理器設(shè)置為已經(jīng)存在的函數(shù)。考察如下代碼： Sample Page! function MyImageA() document.getElementById(MyPic).src=2.jpg; function MyImageB() document.getElementById(MyPic).src=1.jpg; 第3章 JavaScript事件處理 在圖片內(nèi)外移動鼠標(biāo)，圖片輪換 document.getElementById(MyPic).onmouseover=MyImageA; document.getE

18、lementById(MyPic).onmouseout=MyImageB; 第3章 JavaScript事件處理 程序運行后即顯示圖片“1.jpg如圖3-12所示。圖3-12第3章 JavaScript事件處理 當(dāng)鼠標(biāo)移動到圖片區(qū)域時，圖片發(fā)生變化，即顯示圖片“2.jpg，如圖3-13所示。圖3-13第3章 JavaScript事件處理 當(dāng)鼠標(biāo)移離圖片區(qū)域時，顯示默認(rèn)圖片“1.jpg” ，這樣就實現(xiàn)了圖片的翻轉(zhuǎn)?？蓪⑦@種方法擴(kuò)展，用于多幅新聞圖片定時輪流播放的廣告模式，具體方法如下： 首先在和標(biāo)記對之間嵌套 JavaScript 腳本定義兩個函數(shù)如下： function MyImageA()

19、 function MyImageB() 第3章 JavaScript事件處理 然后 通過 JavaScript 腳 本代碼 將標(biāo)記 元素 的mouseover 事件的處理器設(shè)置為已定義的函數(shù) MyImageA()，將其 mouseout 事件的處理器設(shè)置為已定義的函數(shù) MyImageB()， 代碼如下： document.all.MyPic.onmouseover=MyImageA; document.all.MyPic.onmouseout=MyImageB; 由以上調(diào)用過程可以看出，通過顯式聲明的方式定義事件的處理器代碼緊湊、可讀性強(qiáng)，且對顯式聲明的函數(shù)沒有任何限制，還可將該函數(shù)作為其他

20、事件的處理器。較之匿名函數(shù)的方式更為實用。 第3章 JavaScript事件處理 3.4.3 手工觸發(fā)手工觸發(fā)手工觸發(fā)事件的原理相當(dāng)簡單，就是通過其他元素的方法來觸發(fā)一個事件，而不需要通過用戶的動作來觸發(fā)該事件。在上一節(jié)源程序代碼段的和標(biāo)記之間插入如下代碼： 第3章 JavaScript事件處理 保存文件，程序運行后顯示默認(rèn)圖片“1.jpg” ；單擊“測試”按鈕，將顯示圖片“2.jpg” ，如圖3-13 所示；按鈕失去焦點后，圖片發(fā)生變化，顯示圖片“1.jpg” ，如圖 3-12 所示。 如果某個對象的事件有其默認(rèn)的處理器，此時再設(shè)置該事件的處理器，將有可能出現(xiàn)意外的情況?？疾烊缦麓a： fu

21、nction MyTest() var msg=默認(rèn)提交與其他提交方式返回不同的結(jié)果：nn; msg+= 點擊測試按鈕,直接提交表單.n; msg+= 點擊確認(rèn)按鈕,觸發(fā)onsubmit()方法,然后提交表單.n; alert(msg); 第3章 JavaScript事件處理 程序運行后，單擊“測試”按鈕，觸發(fā)表單的提交事件，并直接將表單提交給目標(biāo)頁面“target.html” ；單擊表單默認(rèn)觸發(fā)提交事件的“確認(rèn)”按鈕，將彈出如圖 3-14 所示的警告框，單擊“確認(rèn)”按鈕后，將表單提交給目標(biāo)頁面“target.html” 。 第3章 JavaScript事件處理 圖3-14第3章 JavaSc

22、ript事件處理 3.5 事件處理器設(shè)置的靈活性事件處理器設(shè)置的靈活性 由于HTML可以將事件看成對象的屬性，通過給該屬性賦值的方式來改變事件的處理器，這使得使用JavaScript設(shè)置事件處理器有了很大的靈活性?？疾烊缦聦嵗?/設(shè)置事件處理器MyHandlerA function MyHandlerA() var msg=提示信息 : nn; msg+= 1、 觸發(fā)該按鈕的 Click 事件的處理器 MyHandlerA()!n; msg+= 2 、 改 變 該 按 鈕 的Click事 件 的 處 理 器 為MyHandlerB()!n; 第3章 JavaScript事件處理 alert(

23、msg); /修改按鈕 value 屬性 document.getElementById(MyButton).value=測試按鈕 : 觸發(fā)事件處理器 B; /修改按鈕的 Click 事件的處理器為 MyHandlerB document.getElementById(MyButton).onclick=MyHandlerB; /設(shè)置事件處理器 MyHandlerB function MyHandlerB() var msg=提示信息 : nn; msg+= 1、 觸發(fā)該按鈕的 Click 事件的處理器 MyHandlerB()!n; msg+= 2、改變該按鈕的 Click 事件的處理器為M

24、yHandlerA()!n; 第3章 JavaScript事件處理 alert(msg); document.getElementById(MyButton).value=測試按鈕 : 觸發(fā)事件處理器 A; document.getElementById(MyButton).onclick=MyHandlerA; /設(shè)置按鈕的 Click 事件的初始處理器為 MyHandlerA document.getElementById(MyButton).onclick=MyHandlerA; 第3章 JavaScript事件處理 程序運行后，單擊“測試按鈕 : 觸發(fā)事件處理器A按鈕，彈出警告框如圖3

25、-15所示。圖3-15第3章 JavaScript事件處理 在上述警告框中單擊“確定按鈕后，返回原始頁面，更改按鈕的value屬性為“測試按鈕 : 觸發(fā)事件處理器B。繼續(xù)單擊該按鈕后，彈出警告框如圖3-16所示。圖3-16第3章 JavaScript事件處理 在上述警告框中單擊“確定”按鈕后，返回原始頁面，更改按鈕的value 屬性為“測試按鈕 : 觸發(fā)事件處理器 A” ，繼續(xù)操作可以實現(xiàn)過程循環(huán)。 由程序結(jié)果可見，其主要過程分為 4 步： (1) 文檔載入后，通過屬性賦值的方式將按鈕的 Click 事件默認(rèn)的事件處理器設(shè)置為MyHandlerA，代碼如下： document.getEleme

26、ntById(MyButton).onclick=MyHandlerA; (2) 單擊按鈕后，觸發(fā) Click 事件當(dāng)前的事件處理器MyhandlerA， 后者返回提示信息并將按鈕的 value 屬性更改，同時將其 Click 事件當(dāng)前的事件處理器設(shè)置為 MyhandlerB，代碼如下： 第3章 JavaScript事件處理 document.getElementById(MyButton).value=測試按鈕 : 觸發(fā)事件處理器 A; document.getElementById(MyButton).onclick=MyHandlerA; (3) 在提示頁面單擊“確定”按鈕返回原始頁面后

27、，再次單擊按鈕，觸發(fā) Click 事件當(dāng)前的事件處理器 MyhandlerB，后者返回提示信息并將按鈕的 value 屬性更改，同時將其 Click 事件當(dāng)前的事件處理器設(shè)置為MyhandlerA，代碼如下： document.getElementById(MyButton).value=測試按鈕 : 觸發(fā)事件處理器 B; document.getElementById(MyButton).onclick=MyHandlerB; 第3章 JavaScript事件處理 (4) 在提示頁面單擊“確定按鈕返回原始頁面后，返回步驟(2)。在JavaScript中根據(jù)復(fù)雜的客戶端環(huán)境及時更改事件的處理器

28、，可大大提高頁面的交互能力。值得注意的是，給對象的事件屬性賦值為事件處理函數(shù)時，后者要省略函數(shù)后面的括號，且對象和函數(shù)要在顯式賦值語句之前定義。第3章 JavaScript事件處理 3.6 IE中的中的Event對象對象由于由于IE中文檔的每個元素都作為一個對中文檔的每個元素都作為一個對象而存在，因而增加了事件發(fā)生的概率和可象而存在，因而增加了事件發(fā)生的概率和可用的事件數(shù)目。當(dāng)事件發(fā)生的時候，瀏覽器用的事件數(shù)目。當(dāng)事件發(fā)生的時候，瀏覽器創(chuàng)立全局的創(chuàng)立全局的Event對象，并使它為適宜的事對象，并使它為適宜的事件處理器所用。件處理器所用。3.6.1 對象屬性對象屬性IE中的中的Event對象提供

29、非常豐富的屬性對象提供非常豐富的屬性供腳本程序員調(diào)用，如事件發(fā)生的原始對象、供腳本程序員調(diào)用，如事件發(fā)生的原始對象、相對位置等，其常見屬性及功能介紹如表相對位置等，其常見屬性及功能介紹如表3-2所示。所示。 第3章 JavaScript事件處理 表表3-2第3章 JavaScript事件處理 理解了事件與其處理器之間交互時 Event 對象攜帶的信息以及其全局特性，就很容易通過調(diào)用對象屬性的方式根據(jù)需要獲取事件發(fā)生的諸多信息?？疾烊缦芦@取事件發(fā)生相對位置等信息的代碼： var msg=; msg+=Click 事件發(fā)生后創(chuàng)建的 Event 對象信息:nn; function MyAlert()

30、 msg+=發(fā)生事件的類型 :n; msg+= type = +event.type+ nn; msg+=發(fā)生事件的原始對象 :n; msg+= target = +event.srcElement+ nn; 第3章 JavaScript事件處理 msg+=光標(biāo)相對于事件所在文檔的水平和垂直位置(像素) :n; msg+= x = +event.x+ y = +event.y+ nn; msg+=光標(biāo)相對于事件所在容器的水平和垂直位置(像素) :n; msg+= x = +event.offsetX+ y = +event.offsetY+ nn; msg+=光標(biāo)相對于事件所在屏幕的水平和垂直

31、位置(像素) :n; msg+= x = +event.screenX+ y = +event.screenY+ nn; msg+=光標(biāo)相對于事件所在 Web 頁面的水平和垂直位置(像素) : n; msg+= x = +event.clientX+ y = +event.clientY+ n; alert(msg); 第3章 JavaScript事件處理 Click theEM textto Test! 程序運行后，鼠標(biāo)單擊文檔中文本段的任何一個位置，彈出包含當(dāng)前發(fā)生事件信息的警告框如圖 3-17 所示。 第3章 JavaScript事件處理 圖3-17第3章 JavaScript事件處理

32、在IE中，任何事件發(fā)生后生成的Event對象對該文檔而言是透明的，可將其看成是全局變量使用，即在文檔任何地方都不需通過傳入?yún)?shù)的方式來調(diào)用。該變量生成于其對應(yīng)的事件發(fā)生之時，且在文檔被瀏覽器關(guān)閉時對象所占據(jù)的內(nèi)存空間被釋放出來。3.6.2 事件冒泡IE中的大局部事件會沿著關(guān)系樹上溯(Bubble，也稱冒泡)，在繼承關(guān)系的每一層如果存在適宜的事件處理器那么調(diào)用，不存在那么繼續(xù)上溯，直至上升到關(guān)系樹的頂端或者被某個層所取消，但不支持上溯的事件僅能調(diào)用當(dāng)前事件發(fā)生的原始對象那個層次上可用的事件處理器。第3章 JavaScript事件處理 下面來看一個事件冒泡的例子： var msg=; msg+=事

33、件上溯結(jié)果:nn; msg+=Click 事件開始:nn; function MyAlert() msg+=Click 事件結(jié)束:n; alert(msg); 事件定位于 Body,轉(zhuǎn)向下面事件nn;MyAlert(); 事件定位于 Table,轉(zhuǎn)向下面事件nn 第3章 JavaScript事件處理 下面來看一個事件冒泡的例子： var msg=; msg+=事件上溯結(jié)果:nn; msg+=Click 事件開始:nn; function MyAlert() msg+=Click 事件結(jié)束:n; alert(msg); 第3章 JavaScript事件處理 事件定位于 Body,轉(zhuǎn)向下面事件nn;MyAlert(); 事件定位于 Table,轉(zhuǎn)向下面事件nn 事件定位于 Tr,轉(zhuǎn)向下面事件nn 事件定位于 Td,轉(zhuǎn)向下面事件nn 事件定位于 p,轉(zhuǎn)向下面事件nn Click the /事件發(fā)生的原始對象 事件定位于 em,轉(zhuǎn)向下面事件nn 第3章 JavaScript事件處理 EM text to Test! 程序運行后，鼠標(biāo)點擊頁面中 “EM text”字符，彈出對