基于任務(wù)驅(qū)動模式的JavaScript程序設(shè)計案例教程(西電版)第3章 JavaScript事 件處理_第1頁
基于任務(wù)驅(qū)動模式的JavaScript程序設(shè)計案例教程(西電版)第3章 JavaScript事 件處理_第2頁
基于任務(wù)驅(qū)動模式的JavaScript程序設(shè)計案例教程(西電版)第3章 JavaScript事 件處理_第3頁
基于任務(wù)驅(qū)動模式的JavaScript程序設(shè)計案例教程(西電版)第3章 JavaScript事 件處理_第4頁
基于任務(wù)驅(qū)動模式的JavaScript程序設(shè)計案例教程(西電版)第3章 JavaScript事 件處理_第5頁
已閱讀5頁，還剩65頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

第3章Javascript事件處理第3章

Javascript事件處理概述什么是事件HTML文檔事件Javascript如何處理事件事件處理器設(shè)置的靈活性IE中的Event對象第3章Javascript事件處理3.1

概

述用戶可以通過多種方式與瀏覽器中的頁面進行交互，而事件正是作為這種交互的橋梁出現(xiàn)的。Web應(yīng)用程序開發(fā)人員通過Javascript腳本內(nèi)置的和自定義的事件處理器來響應(yīng)用戶的動作，從而開發(fā)出更具交互性和動態(tài)性的頁面。本章主要介紹Javascript中事件處理的概念和方法，列出了Javascript預(yù)定義的事件處理器，并且介紹了如何編寫用戶自定義的事件處理函數(shù)，以及如何將它們與頁面中用戶的動作相關(guān)聯(lián)而得到預(yù)期的交互性能。第3章Javascript事件處理3.2

什么是事件廣義上講，Javascript中的事件是指用戶載入目標頁面直到該頁面被關(guān)閉期間，瀏覽器的動作及該頁面對用戶操作的響應(yīng)。事件的復(fù)雜程度大不相同，簡單的如鼠標的移動、當(dāng)前頁面的關(guān)閉、鍵盤的輸入等，復(fù)雜的如拖曳頁面圖片或單擊浮動菜單等。事件處理器是與特定的文本和特定的事件相聯(lián)系的Javascript腳本代碼，當(dāng)該文本發(fā)生改變或者事件被觸發(fā)時，瀏覽器執(zhí)行該代碼并進行相應(yīng)的處理操作；而響應(yīng)某個事件進行的處理過程稱為事件處理。下面就是簡單的事件觸發(fā)和處理過程，如圖3-1所示。第3章Javascript事件處理圖3-1第3章Javascript事件處理Javascript中的事件并不限于用戶的頁面動作如MouseMove、Click等，還包括瀏覽器的狀態(tài)改變，如在絕

大多數(shù)瀏覽器獲得支持的Load、Resize事件等。Load事件在瀏覽器載入文檔時觸發(fā)，如果某事件(如啟動定時器、提前加載圖片等)要在文檔載入時觸發(fā)，一般都在<body>標記里面加入類似于“onload="MyFunction()"”的語句；Resize事件則在用戶改變了瀏覽器窗口的大小時觸發(fā)，當(dāng)用戶改變窗口大小時，需改變文檔頁面的內(nèi)容布局，使其以恰當(dāng)、友好的方式顯示給用戶。第3章Javascript事件處理瀏覽器響應(yīng)用戶的動作，如鼠標單擊按鈕、鏈接等，并可以通過默認的系統(tǒng)事件與該動作相關(guān)聯(lián)，但用戶也可以通過編寫自己的腳本，來改變該動作的默認事件處理器。舉個簡單的例子，模擬用戶單擊頁面鏈接，該事件產(chǎn)生的默認操作是瀏覽器載入鏈接的href屬性對應(yīng)的URL地址所代表的頁面，但利用Javascript腳本語言能夠很容易地編寫另外的事件處理器來響應(yīng)該單擊鼠標的動作。考察如下代碼：第3章Javascript事件處理第3章Javascript事件處理現(xiàn)代事件模型中引入Event對象，它包含其他對象使用的常量和方法。當(dāng)事件發(fā)生后，產(chǎn)生臨時的Event對象實例，并附加當(dāng)前事件的信息如鼠標定位、事件類型等，然后傳遞給相關(guān)的事件處理器進行處理。事件處理完畢后，該臨時Event對象實例所占據(jù)的內(nèi)存空間被釋放出來，瀏覽器便可以等待其他事件的出現(xiàn)并進行處理。如果短時間內(nèi)發(fā)生的事件較多，瀏覽器按事件發(fā)生的順序依次執(zhí)行。第3章Javascript事件處理事件發(fā)生的場合很多，包括瀏覽器自身狀態(tài)的改變和頁面中的按鈕、鏈接、圖片、層等。同時根據(jù)DOM模型，文

本也可以作為對象并響應(yīng)相關(guān)動作，如鼠標雙擊、文本被選擇等。事件的處理方法與結(jié)果同瀏覽器環(huán)境有很大的關(guān)系，但總的來說，瀏覽器的版本越新，支持的事件處理器就越多、越完善?；诖耍诰帉慗avascript腳本時，要充分考慮瀏覽器的兼容性，以編寫適合大多數(shù)瀏覽器的腳本語言。第3章Javascript事件處理3.3

HTML文檔事件3.3.1事件綁定HTML文檔將元素的常用事件(如onclick、onmouseover等)當(dāng)作屬性捆綁在HTML元素上，當(dāng)該元素的特定事件發(fā)

生時，對應(yīng)于此特定事件的事件處理器就被執(zhí)行，并將處理結(jié)果返回給瀏覽器。事件捆綁使得特定的代碼被放置在所處對象的事件處理器中?？疾烊缦麓a：第3章Javascript事件處理第3章Javascript事件處理鼠標單擊“MyLinker”鏈接后，瀏覽器調(diào)用自定義的Click事件處理器，并將結(jié)果(警告框“You

have

Clicked

thelink!”)返回給瀏覽器。由事件處理器的實現(xiàn)形式來看，<a>標記的onclick事件與其href屬性的地位均等，實現(xiàn)了HTML中的事件捆綁策略。3.3.2瀏覽器事件瀏覽器事件指載入文檔直到該文檔被關(guān)閉期間的瀏覽器事件，如瀏覽器載入文檔事件onload、關(guān)閉文檔事件onunload、失去焦點事件onblur、獲得焦點事件onfocus等?？疾烊缦麓a：第3章Javascript事件處理第3章Javascript事件處理第3章Javascript事件處理將上述源程序保存為*.html(或*.htm)文檔，雙擊該文檔后系統(tǒng)調(diào)用默認的瀏覽器進行瀏覽。當(dāng)載入該文檔時，觸發(fā)window.load事件，彈出警告框如圖3-2所示。圖3-2第3章Javascript事件處理當(dāng)把焦點給該文檔頁面時，觸發(fā)window.onfocus事件，彈出警告框如圖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事件處理3.3.3

HTML元素事件頁面載入后，用戶與頁面的交互主要指發(fā)生在(如按鈕、鏈接、表單、圖片等)HTML元素上的用戶動作，以及該頁面對此動作作出的響應(yīng)上。如簡單的鼠標單擊按鈕事件：元

素為button、事件為click、事件處理器為onclick()。了解了該事件的相關(guān)信息，程序員就可以編寫其接口的事件處理程序(也稱事件處理器)，從而實現(xiàn)諸如表單驗證、文本框內(nèi)容選擇等功能。HTML文檔中元素對應(yīng)的事件因元素類型而異，表3-1列出了當(dāng)前通用版本瀏覽器上支持的常用事件。第3章Javascript事件處理表3-1第3章Javascript事件處理第3章Javascript事件處理第3章Javascript事件處理第3章Javascript事件處理圖3-7第3章Javascript事件處理鼠標點擊文本框后，文本框獲得當(dāng)前輸入焦點，觸發(fā)MyFocus()函數(shù)，彈出警告框如圖3-8所示。圖3-8第3章Javascript事件處理修改文本框的文本后，鼠標在文本框外文檔中任意位置點擊，觸發(fā)MyBlur()函數(shù)的同時，觸發(fā)MyChange()函數(shù)，彈出警告框如圖3-9所示。圖3-9第3章Javascript事件處理在文本框獲得焦點后，用鼠標選擇某段文本，觸發(fā)MySelect()函數(shù)，彈出警告框如圖3-10所示。HTML元素事件在表單提交、在線辦公、防止網(wǎng)站文章被復(fù)制、禁止下載網(wǎng)頁中圖片等方面應(yīng)用十分廣泛，其主要是能有效識別用戶的動作并做出相應(yīng)的反應(yīng)，如彈出警告框、執(zhí)行window.close()方法關(guān)閉頁面等操作。圖3-10第3章Javascript事件處理3.3.4獲得頁面元素在對事件進行處理之前，我們先來了解一下如何獲得頁面中的某個特定元素，以便對該元素進行簡單的操作。在HTML4版本中添加了HTML元素的id屬性來定位文檔對象，基本上每一個頁面元素都可以設(shè)置id屬性，無論是<p>、<b>標記，或者是表單元素<input>等等，通過調(diào)用document對

象的getElementById()方法可以獲得該元素，語法如下所示：第3章Javascript事件處理第3章Javascript事件處理3.4

Javascript如何處理事件3.4.1匿名函數(shù)匿名函數(shù)的方式即使用Function對象構(gòu)造匿名的函數(shù)，并將其方法復(fù)制給事件，此時該匿名的函數(shù)成為該事件的事件處理器?？疾烊缦麓a：第3章Javascript事件處理第3章Javascript事件處理程序運行結(jié)果如圖3-11所示。圖3-11第3章Javascript事件處理第3章Javascript事件處理3.4.2顯式聲明設(shè)置事件處理器時，也可不使用匿名函數(shù)，而是將該事件的處理器設(shè)置為已經(jīng)存在的函數(shù)?？疾烊缦麓a：第3章Javascript事件處理第3章Javascript事件處理程序運行后即顯示圖片“1.jpg”如圖3-12所示。圖3-12第3章Javascript事件處理當(dāng)鼠標移動到圖片區(qū)域時，圖片發(fā)生變化，即顯示圖片“2.jpg”，如圖3-13所示。圖3-13第3章Javascript事件處理第3章Javascript事件處理第3章Javascript事件處理3.4.3手工觸發(fā)手工觸發(fā)事件的原理相當(dāng)簡單，就是通過其他元素的方法來觸發(fā)一個事件，而不需要通過用戶的動作來觸發(fā)該事件。在上一節(jié)源程序代碼段的</script>和</center>標記之間插入如下代碼：第3章Javascript事件處理第3章Javascript事件處理第3章Javascript事件處理圖3-14第3章Javascript事件處理3.5

事件處理器設(shè)置的靈活性由于HTML可以將事件看成對象的屬性，通過給該屬性賦值的方式來改變事件的處理器，這使得使用Javascript設(shè)置事件處理器有了很大的靈活性?？疾烊缦聦嵗旱?章Javascript事件處理第3章Javascript事件處理第3章Javascript事件處理程序運行后，單擊“測試按鈕:觸發(fā)事件處理器A”按鈕，彈出警告框如圖3-15所示。圖3-15第3章Javascript事件處理在上述警告框中單擊“確定”按鈕后，返回原始頁面，更改按鈕的value屬性為“測試按鈕:觸發(fā)事件處理器B”。繼續(xù)單擊該按鈕后，彈出警告框如圖3-16所示。圖3-16第3章Javascript事件處理第3章Javascript事件處理第3章Javascript事件處理(4)在提示頁面單擊“確定”按鈕返回原始頁面后，返回步驟(2)。在Javascript中根據(jù)復(fù)雜的客戶端環(huán)境及時更改事件的處理器，可大大提高頁面的交互能力。值得注意的是，給對象的事件屬性賦值為事件處理函數(shù)時，后者要省略函數(shù)后面的括號，且對象和函數(shù)要在顯式賦值語句之前定義。第3章Javascript事件處理3.6

IE中的Event對象由于IE中文檔的每個元素都作為一個對象而存在，因而增加了事件發(fā)生的概率和可用的事件數(shù)目。當(dāng)事件發(fā)生的時候，瀏覽器創(chuàng)建全局的Event對象，并使它為合適的事件處理器所用。3.6.1對象屬性IE中的Event對象提供非常豐富的屬性供腳本程序員調(diào)用，如事件發(fā)生的原始對象、相對位置等，其常見屬性及功能介紹如表3-2所示。第3章Javascript事件處理表3-2第3章Javascript事件處理第3章Javascript事件處理第3章Javascript事件處理第3章Javascript事件處理圖3-17第3章Javascript事件處理在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ā)生的

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論