第13章Javascript事件

1、 Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析Web技術(shù)及應(yīng)用技術(shù)及應(yīng)用主講：梁春泉Email: 電話：87091546 Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析 第第13章章 Javascript事件分析事件分析2015年11月 Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析本章學(xué)習(xí)目標(biāo) 了解JavaScript事件類型；

2、理解事件發(fā)生時(shí)事件處理的三種方式 ； 學(xué)會(huì)利用表單的提交及重置事件對(duì)表單的數(shù)據(jù)進(jìn)行校驗(yàn)； 理解鼠標(biāo)事件中的鼠標(biāo)單擊及鼠標(biāo)移動(dòng)事件； 掌握常用的鍵盤及窗口事件。 Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析13.1 JavaScript事件概述 事件編程事件編程: :讓用戶不僅能夠?yàn)g覽頁(yè)面中的內(nèi)容，而且還可以和頁(yè)面元素進(jìn)行交互。 事件事件-事件是可以被JavaScript偵測(cè)到的行為(ACTION)。事件源WindowFormMousekey事件HTML事件突變事件雙擊事件事件句柄onclickondblc

3、lick編寫事件處理代碼 Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析13.1.1 事件類型鼠標(biāo)單擊：例如單擊button、選中checkbox和radio等元素；鼠標(biāo)進(jìn)入、懸浮或退出頁(yè)面的某個(gè)熱點(diǎn)：例如鼠標(biāo)停在一個(gè)圖片上方或者進(jìn)入table的范圍；鍵盤按鍵：當(dāng)按下按鍵或釋放按鍵時(shí)；HTML事件：例如頁(yè)面body被加載時(shí)；在表單中選取輸入框或改變輸入框中文本的內(nèi)容：例如選中或修改了文本框中的內(nèi)容；突變事件：主要指文檔底層元素發(fā)生改變時(shí)觸發(fā)的事件，如DomSubtreeModified(DOM子樹修改)。事

4、件類型：1.鼠標(biāo)事件2.鍵盤事件3.HTML事件4.突變事件 Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析13.1.2 事件句柄事件句柄事件句柄 （event handlerevent handler） 事件句柄事件句柄是是事件發(fā)生要進(jìn)行的操作事件發(fā)生要進(jìn)行的操作。onloadonload屬性就是我屬性就是我們所說(shuō)的們所說(shuō)的事件句柄事件句柄, ,也稱為也稱為事件屬性事件屬性?；菊Z(yǔ)法基本語(yǔ)法 ： 如：如： body 格式：格式： onloadonload = =“show();show();” / /*

5、*load load * */ /事件處理函數(shù)事件句柄事件 Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析13.1.2 事件句柄-一覽表事件分類事件名稱事件句柄事件窗口事件窗口事件loadonLoad當(dāng)文檔載入時(shí)執(zhí)行JS代碼unloadonUnload當(dāng)文檔卸載時(shí)執(zhí)行JS代碼表單元素事表單元素事件件changeonChange當(dāng)元素改變時(shí)執(zhí)行JS代碼 submitonSubmit當(dāng)表單被提交時(shí)執(zhí)行JS代碼resetonReset 當(dāng)表單被重置時(shí)執(zhí)行JS代碼selectonSelect當(dāng)元素被選取時(shí)執(zhí)行JS代

6、碼bluronBlur當(dāng)元素失去焦點(diǎn)時(shí)執(zhí)行JS代碼focusonFocus當(dāng)元素獲得焦點(diǎn)時(shí)執(zhí)行JS代碼鼠標(biāo)事件鼠標(biāo)事件clickonClick當(dāng)鼠標(biāo)被單擊時(shí)執(zhí)行JS代碼 dblclickonDblclick當(dāng)鼠標(biāo)被雙擊時(shí)執(zhí)行JS代碼mousedownonMouseDown當(dāng)鼠標(biāo)按鈕被按下時(shí)執(zhí)行JS代碼mousemoveonMouseMove當(dāng)鼠標(biāo)指針移動(dòng)時(shí)執(zhí)行JS代碼mouseoutonMouseOut當(dāng)鼠標(biāo)指針移出某元素時(shí)執(zhí)行JS代碼mouseoveronMouseOver當(dāng)鼠標(biāo)指針懸停于某元素之上時(shí)執(zhí)行JS代碼mouseuponMouseUp當(dāng)鼠標(biāo)按鈕被松開時(shí)執(zhí)行JS代碼鍵盤事件鍵盤事件k

7、eydownonKeyDown當(dāng)鍵盤被按下時(shí)執(zhí)行JS代碼 keypressonKeyPress當(dāng)鍵盤被按下后又松開時(shí)執(zhí)行JS代碼keyuponKeyUp當(dāng)鍵盤被松開時(shí)執(zhí)行JS代碼 Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析13.1.3 事件處理當(dāng)一個(gè)事件發(fā)生時(shí)，如果需要截獲并處理該事件，只需要定義該事件的事件句柄所關(guān)聯(lián)的事件處理代碼，具體的處理方式有以下3種：l 在HTML標(biāo)記中的靜態(tài)指定 l 在JavaScript 中動(dòng)態(tài)指定.=;l 編寫特定對(duì)象特定事件的JavaScript /事件處理程序代碼 W

8、eb技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析function testInfo(mes) alert(mes); HTML屬性的事件處理器舉例 13.1.3 事件處理-直接在HTML標(biāo)記中指定基本語(yǔ)法：標(biāo)記 . 事件句柄1=事件處理程序1 事件句柄2 =事件處理程序2 .語(yǔ)法說(shuō)明： 一個(gè)標(biāo)記可以同時(shí)指定多個(gè)事件處理程序，事件處理程序既可以是標(biāo)記中的自定義函數(shù)，還可以直接將事件處理代碼寫在此位置。 Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Jav

9、ascript事件分析13.1.3 事件處理-動(dòng)態(tài)綁定來(lái)處理事件 事件處理程序在JavaScript中動(dòng)態(tài)指定(分配)： .=; obj.onclick=function()disp(); function clickHandler() alert(即將提交表單！); return true; document.getElementById(input).onclick=function()return clickHandler(); /動(dòng)態(tài)分配一個(gè)事件句柄 myform.mybutton.onclick(); 人為代碼觸發(fā)事件初始狀態(tài)沒(méi)有onclick Web技術(shù)及應(yīng)用信息工程學(xué)院Colle

10、ge of Information Engineering第13章 Javascript事件分析13.1.3 事件處理-特定對(duì)象的特定事件處理程序 編寫特定對(duì)象的特定事件JavaScript代碼： /事件處理程序代碼 alert(網(wǎng)頁(yè)讀取完成，歡迎光臨！); 這是特定對(duì)象的特定事件處理程序 Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析13.1.4 事件處理程序的返回值事件處理程序的返回值 在JavaScript中通常事件處理程序不需要有返回值，這時(shí)瀏覽器會(huì)按默認(rèn)方式進(jìn)行處理；很多情況下需要使用返回值，來(lái)判

11、斷事件處理程序是否正確進(jìn)行處理。返回值類型：boolean布爾型值 瀏覽器根據(jù)返回值的類型決定下一步如何操作。當(dāng)返回值為true，進(jìn)行默認(rèn)操作； 當(dāng)返回值為 false，阻止瀏覽器的下一步操作?；菊Z(yǔ)法：事件句柄=“return 函數(shù)名（參數(shù)）; Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析13.1.4 事件處理程序的返回值-案例 function testJs() if(1.value=) alert(沒(méi)有輸入內(nèi)容！); return false; else ale

12、rt(歡迎你!+1.value); return true; 姓名： 簡(jiǎn)單測(cè)試頁(yè)面 這是簡(jiǎn)單測(cè)試頁(yè)面 返回結(jié)果為真，返回結(jié)果為真，跳轉(zhuǎn)到跳轉(zhuǎn)到action屬性指定的URL上執(zhí)行 Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析13.2 表單事件 Form表單是網(wǎng)頁(yè)設(shè)計(jì)是一種重要的與用戶進(jìn)行交互的工具，它用于采集用戶輸入各類信息。表單的事件如表13-1所示。表13-1 表單事件句柄和事件的對(duì)照事件分類事件分類事件句柄事件句柄事件事件表單元素表單元素事件事件onchangeo

13、nchange當(dāng)元素改變時(shí)執(zhí)行腳本當(dāng)元素改變時(shí)執(zhí)行腳本 onsubmitonsubmit當(dāng)表單被提交時(shí)執(zhí)行腳本當(dāng)表單被提交時(shí)執(zhí)行腳本onresetonreset 當(dāng)表單被重置時(shí)執(zhí)行腳本當(dāng)表單被重置時(shí)執(zhí)行腳本onselectonselect當(dāng)元素被選取時(shí)執(zhí)行腳本當(dāng)元素被選取時(shí)執(zhí)行腳本onbluronblur當(dāng)元素失去焦點(diǎn)時(shí)執(zhí)行腳本當(dāng)元素失去焦點(diǎn)時(shí)執(zhí)行腳本onfocusonfocus當(dāng)元素獲得焦點(diǎn)時(shí)執(zhí)行腳本當(dāng)元素獲得焦點(diǎn)時(shí)執(zhí)行腳本 Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析13.2.1 獲得及失去焦點(diǎn)事件

14、當(dāng)表單中的元素獲得焦點(diǎn)時(shí)會(huì)觸發(fā)Focus獲得事件，當(dāng)表單中的元素失去焦點(diǎn)時(shí)會(huì)觸發(fā)Blur失去焦點(diǎn)事件。 獲得/失去焦點(diǎn)測(cè)試 function getFocus()document.bgColor =red“; function loseFocus()document.bgColor =blue“; Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析13.2.2 提交及重置事件 表單的Submit事件觸發(fā)后會(huì)將表單中的數(shù)據(jù)提交到服務(wù)器端，Reset事件觸發(fā)后會(huì)將表單中的數(shù)據(jù)重置為初始值。 表單數(shù)據(jù)提交實(shí)例 用戶名

15、： 密 碼： Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析13.2.2 提交及重置事件-案例 function submitTest() var msg =表單數(shù)據(jù)的獲?。簄; var username = document.getElementById(input1).value; msg+=用戶名:; msg+=username; var psw = document.getElementById(input2).value; msg+=，n密碼:是; msg+=psw; alert

16、(msg); return false; function resetTest() alert(將數(shù)據(jù)清空); fieldsetwidth:350px;height:150px; Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析13.2.3 改變及選擇事件 下拉菜單 function changeImage() var a = document.getElementById(game).selectedIndex; /獲取下拉框中選擇項(xiàng) document.getElementById(show).src =

17、document.getElementById(“game”).optionsa.value;/將圖 片更改為對(duì)應(yīng)選擇項(xiàng) Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析13.2.3 改變及選擇事件-案例 -請(qǐng)選擇- 平板電視 筆記本電腦 單反相機(jī) 智能手機(jī)注：當(dāng)選擇列表項(xiàng)時(shí)發(fā)生改變事件，調(diào)用函數(shù)更新圖像。 Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析13.3 鼠標(biāo)事件 用戶在頁(yè)面上操作鼠標(biāo)會(huì)觸發(fā)鼠標(biāo)事件，如用戶單擊鼠標(biāo)

18、左鍵會(huì)觸發(fā)Click事件，雙擊鼠標(biāo)時(shí)會(huì)觸發(fā)DblClick事件，移動(dòng)鼠標(biāo)會(huì)觸發(fā)鼠標(biāo)移動(dòng)事件，詳見表13-2所示。 表13-2 事件句柄和事件的對(duì)照事件分類事件分類事件句柄事件鼠標(biāo)事件鼠標(biāo)事件onclick當(dāng)鼠標(biāo)被單擊時(shí)執(zhí)行腳本 ondblclick當(dāng)鼠標(biāo)被雙擊時(shí)執(zhí)行腳本onmousedown當(dāng)鼠標(biāo)按鈕被按下時(shí)執(zhí)行腳本onmousemove當(dāng)鼠標(biāo)指針移動(dòng)時(shí)執(zhí)行腳本onmouseout當(dāng)鼠標(biāo)指針移出某元素時(shí)執(zhí)行腳本onmouseover當(dāng)鼠標(biāo)指針懸停于某元素之上時(shí)執(zhí)行腳本onmouseup當(dāng)鼠標(biāo)按鈕被松開時(shí)執(zhí)行腳本 Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engi

19、neering第13章 Javascript事件分析13.3.1 鼠標(biāo)單擊、雙擊事件 鼠標(biāo)單擊事件 輸入框一： 輸入框二： 點(diǎn)擊下面的按鈕，把 Field1 的內(nèi)容拷貝到 Field2 中： Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析13.3.2 鼠標(biāo)移動(dòng)事件 鼠標(biāo)移動(dòng)事件有：MouseOver事件、MouseOut事件、MouseDown及MouseUp等事件。 鼠標(biāo)移動(dòng)事件 function mouseOver()/鼠標(biāo)盤旋 document.getElementById(b1).src =eg_m

20、ouse1.jpg” function mouseOut()/鼠標(biāo)移出 document.getElementById(b1).src =eg_mouse2.jpg” Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析13.3.2 鼠標(biāo)移動(dòng)事件-案例 鼠標(biāo)移動(dòng)事件 Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析13.4 鍵盤事件表表13-3 13-3 事件句柄和事件的對(duì)照事件句柄和事件的對(duì)照事件分類事件分類事件句柄事件句柄事

21、件事件鍵盤事件鍵盤事件onkeydownonkeydown當(dāng)鍵盤被按下時(shí)執(zhí)行腳本當(dāng)鍵盤被按下時(shí)執(zhí)行腳本 onkeypressonkeypress當(dāng)鍵盤被按下后又松開時(shí)執(zhí)行腳本當(dāng)鍵盤被按下后又松開時(shí)執(zhí)行腳本onkeyuponkeyup當(dāng)鍵盤被松開時(shí)執(zhí)行腳本當(dāng)鍵盤被松開時(shí)執(zhí)行腳本 通過(guò) window的event對(duì)象的keyCode屬性來(lái)獲取按鍵代碼的值，其中：回車：13，09：4857;AaZz:6590; 使用方法：window.event.keyCode或event.keyCode。 Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Ja

22、vascript事件分析13.4 鍵盤事件-案例鍵盤事件舉例 function k_press() if(window.event.keyCode!=13) if(event.keyCode57) /輸入非數(shù)字 alert(你輸入學(xué)號(hào)錯(cuò)誤！); else if(myform.s_no.value.length=0)/未輸入字符 alert(學(xué)號(hào)不能為空); else alert(你的學(xué)號(hào)為：+myform.s_no.value); Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析13.4 鍵盤事件-案例fun

23、ction k_press1()if(window.event.keyCode=13)alert(你的姓名為：+myform.s_name.value); 學(xué)號(hào)： 姓名： Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析13.5 窗口事件 窗口事件舉例 function load() var str = 歡迎訪問(wèn)本頁(yè)面!; alert(str); function upload() var str = 歡迎下次訪問(wèn)!; alert(str); Web技術(shù)及應(yīng)用信息工程學(xué)院College of Informat

24、ion Engineering第13章 Javascript事件分析13.6 綜合實(shí)例 頁(yè)面設(shè)計(jì)分析：頁(yè)面設(shè)計(jì)分析： 采用表單和表單控件完成頁(yè)面布局。采用樣式表完成頁(yè)面效果控制。 自定義自定義2個(gè)JS函數(shù)，分別是checkReg()（檢查輸入數(shù)據(jù)的有效性）和clearInfo()(清除信息)函數(shù)。通過(guò)ID獲取頁(yè)面元素的通用函數(shù)function $(id) return document.getElementById(id); Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析13.6 綜合實(shí)例-代碼strong

25、color:red;font-style:bolder;fieldsetwidth:560px;height:186px;padding:0px 50px;#buttonmargin:10px 20px;function checkReg()var username=$(myname).value,pwd=$(mypwd1).value;var pwdConfirm=$(mypwd2).value,checkright=true;if(username= | pwd=) /兩者中有一個(gè)為空 alert(請(qǐng)確認(rèn)用戶名和密碼輸入是否正確！); checkright=false;else/不為空，再判斷用戶名和密碼的長(zhǎng)度合法性 if(username.length6) alert(用戶名長(zhǎng)度太短，至少6個(gè)字符！); checkright=false; else if(pwd.length6) Web技術(shù)及應(yīng)用信息工程學(xué)院College of Information Engineering第13章 Javascript事件分析