JavaScript事件及應(yīng)用課件

1、 JavaScript事件及應(yīng)用掌握事件處理的概念掌握事件基本模型和表單元素的常用事件使用表單元素驗(yàn)證用戶輸入JavaScript事件及應(yīng)用 事件是頁面上的某種操作，事件的源頭來自用戶 JavaScript中的事件也是注冊事件，頁面的某個(gè)組件注冊了某種事件，綁定相應(yīng)的事件處理程序 一旦瀏覽器捕獲到與這個(gè)組件注冊的事件產(chǎn)生，就自動(dòng)觸發(fā)綁定的事件處理程序 事件名稱由事件類型外加一個(gè)“on”前綴構(gòu)成JavaScript事件及應(yīng)用將事件綁定到元素的屬性將事件綁定到元素的屬性事件注冊事件注冊點(diǎn)我看看點(diǎn)我看看thisthis關(guān)鍵字的使用關(guān)鍵字的使用this關(guān)鍵字關(guān)鍵字 小寫：小寫： 大寫：大寫：JavaS

2、cript事件及應(yīng)用綁定到對象的屬性使用使用JavaScript綁定事件綁定事件function down()alert(你點(diǎn)擊了鼠標(biāo)你點(diǎn)擊了鼠標(biāo)!);document.onmousedown=down;JavaScript事件及應(yīng)用事件處理函數(shù)的返回值可以影響事件的默認(rèn)動(dòng)作事件處理函數(shù)的返回值可以影響事件的默認(rèn)動(dòng)作取消事件的默認(rèn)動(dòng)作可以通過使事件處理函數(shù)返回取消事件的默認(rèn)動(dòng)作可以通過使事件處理函數(shù)返回false來實(shí)現(xiàn)來實(shí)現(xiàn)click事件返回事件返回false來阻止表單被提交來阻止表單被提交不能提交表單不能提交表單 姓名：姓名： JavaScript事件及應(yīng)用事件事件觸發(fā)時(shí)機(jī)標(biāo)準(zhǔn)XHTML中支

3、持的元素onblur元素失去焦點(diǎn)后onchange元素值發(fā)生改變且已失去焦點(diǎn)后等onclick鼠標(biāo)在元素上單擊時(shí)大部分可見元素ondblclick鼠標(biāo)在元素上雙擊時(shí)大部分可見元素onfocus元素獲得焦點(diǎn)等onkeydown鍵盤上某個(gè)鍵被按下時(shí)大部分可見元素onkeypress鍵盤上某個(gè)鍵被按下并且釋放時(shí)大部分可見元素onkeyup鍵盤上某個(gè)鍵被彈起時(shí)大部分可見元素onload對象裝載完畢時(shí)等事件事件觸發(fā)時(shí)機(jī)標(biāo)準(zhǔn)XHTML中支持的元素onload對象裝載完畢時(shí)等onmousedown在元素上按下鼠標(biāo)時(shí)大部分可見元素onmousemove在元素上移動(dòng)鼠標(biāo)時(shí)大部分可見元素onmouseout鼠標(biāo)移

4、出元素時(shí)大部分可見元素onmouseover鼠標(biāo)移動(dòng)到元素的上方時(shí)大部分可見元素onmouseup在元素上釋放鼠標(biāo)時(shí)大部分可見元素onreset表單被重置時(shí)onselect文本內(nèi)容被選擇時(shí)onsubmit表單被提交時(shí)onunload對象被卸載時(shí)JavaScript事件及應(yīng)用隨滾動(dòng)條移動(dòng)的廣告對聯(lián)隨滾動(dòng)條移動(dòng)的廣告對聯(lián) JavaScript事件及應(yīng)用仿賽車游戲仿賽車游戲 event.keyCode屬性得到鍵盤事件鍵的編碼屬性得到鍵盤事件鍵的編碼(ACSII碼碼)，鍵盤上方向鍵左、上、右、下鍵的鍵盤上方向鍵左、上、右、下鍵的ASCII碼分別是碼分別是37、38、39、40JavaScript事件及

5、應(yīng)用表單對象屬性屬性action表單數(shù)據(jù)將被提交到的頁面表單數(shù)據(jù)將被提交到的頁面method提交表單的方法，提交表單的方法，get方法和方法和post方法方法方法方法submit()提交表單提交表單事件事件onsubmit表單提交時(shí)觸發(fā)，返回值是表單提交時(shí)觸發(fā)，返回值是false將不提交表單數(shù)據(jù)將不提交表單數(shù)據(jù)文本框?qū)ο髮傩詫傩詖alue文本框的內(nèi)容文本框的內(nèi)容readonly文本框的內(nèi)容不能手動(dòng)修改，但可以通過程序改變文本框的內(nèi)容不能手動(dòng)修改，但可以通過程序改變方法方法focus()使文本框獲得焦點(diǎn)使文本框獲得焦點(diǎn)select()使文本框內(nèi)容被選中使文本框內(nèi)容被選中事件事件onblur光標(biāo)離

6、開文本框時(shí)觸發(fā)光標(biāo)離開文本框時(shí)觸發(fā)onfocus光標(biāo)進(jìn)入文本框時(shí)觸發(fā)光標(biāo)進(jìn)入文本框時(shí)觸發(fā)onchange文本框的內(nèi)容已改變且失去焦點(diǎn)時(shí)觸發(fā)文本框的內(nèi)容已改變且失去焦點(diǎn)時(shí)觸發(fā)文本框?qū)ο髮傩詫傩詖alue顯示在按鈕表面的文字顯示在按鈕表面的文字disabled在代碼中設(shè)置按鈕是否能使用，取值在代碼中設(shè)置按鈕是否能使用，取值true或或false事件事件onclick鼠標(biāo)點(diǎn)擊按鈕時(shí)觸發(fā)鼠標(biāo)點(diǎn)擊按鈕時(shí)觸發(fā)JavaScript事件及應(yīng)用雅虎郵箱注冊改進(jìn)版雅虎郵箱注冊改進(jìn)版td font-family:新宋體新宋體 ; font-size:14px;!- var pass1 ,pass2 ; /存放兩次密

7、碼存放兩次密碼 var flag = false ; / 標(biāo)志是否提交表單標(biāo)志是否提交表單 function cls0() var val = document.myform.mainMail.value ; if(val = 請輸入郵件地址請輸入郵件地址) document.myform.mainMail.value = ; document.myform.mainMail.focus(); /郵件地址得到焦點(diǎn)郵件地址得到焦點(diǎn) function doAction0() var email = document.myform.mainMail.value ; var reg = /0-9a-z

8、A-Z_+0-9a-zA-Z+.10-9a-zA-Z+.?0-9a-zA-Z+$/; if(!reg.test(email) document.getElementById(td0).innerHTML=郵件地址不符合要求郵件地址不符合要求; document.myform.mainMail.select(); /輸入框高亮顯示輸入框高亮顯示 flag = false ; 改進(jìn)第4章上機(jī)部分練習(xí)1的雅虎郵箱驗(yàn)證。實(shí)現(xiàn)功能有：即時(shí)提示用戶的輸入的數(shù)據(jù)是否符合要求，使用文字的顏色來提示，同時(shí)，不同的輸入框之間切換使用【Enter】鍵來完成，默認(rèn)使用【Tab】鍵。else document.getE

9、lementById(td0).innerHTML=郵件地址格式正確郵件地址格式正確; flag = true ; function doAction1() pass1 = document.myform.pwd.value ; var reg1 = /d6,/; if(!reg1.test(pass1) document.getElementById(td1).innerHTML=密碼不符合要求密碼不符合要求; flag = false ; else document.getElementById(td1).innerHTML=密碼格式符合要求密碼格式符合要求; flag = true ;

10、/更改更改enter鍵鍵 為為tab鍵鍵function changeCode() if(event.keyCode = 13 ) event.keyCode = 9 ; /判斷是否提交表單判斷是否提交表單 function check() return flag ; document.onkeydown = changeCode; /給文檔添加給文檔添加onkeydown事件事件/ - 創(chuàng)建你的雅虎郵箱創(chuàng)建你的雅虎郵箱 雅虎郵箱：雅虎郵箱： 郵箱名只能是字母和數(shù)字、下劃線郵箱名只能是字母和數(shù)字、下劃線 密碼：密碼： 密碼至少是密碼至少是6位數(shù)字位數(shù)字 再次輸入密碼：再次輸入密碼： 密碼至少是

11、密碼至少是6位數(shù)字位數(shù)字 JavaScript事件及應(yīng)用復(fù)選框?qū)ο髥芜x框?qū)ο髮傩詫傩詂hecked獲取或設(shè)置復(fù)選按鈕是否被選中；代碼中可以通過改變該屬性來獲取或設(shè)置復(fù)選按鈕是否被選中；代碼中可以通過改變該屬性來設(shè)置復(fù)選按鈕的狀態(tài)設(shè)置復(fù)選按鈕的狀態(tài)value獲取或設(shè)置復(fù)選按鈕獲取或設(shè)置復(fù)選按鈕value屬性的值屬性的值事件事件onblur失去焦點(diǎn)時(shí)觸發(fā)失去焦點(diǎn)時(shí)觸發(fā)onfocus獲得焦點(diǎn)時(shí)觸發(fā)獲得焦點(diǎn)時(shí)觸發(fā)onclick鼠標(biāo)單擊時(shí)觸發(fā)鼠標(biāo)單擊時(shí)觸發(fā)屬性屬性checked獲取或設(shè)置單選按鈕是否被選中；可以通過改變該屬性來設(shè)置單選獲取或設(shè)置單選按鈕是否被選中；可以通過改變該屬性來設(shè)置單選按鈕的狀態(tài)按

12、鈕的狀態(tài)value獲取或設(shè)置單選按鈕獲取或設(shè)置單選按鈕value屬性的值屬性的值事件事件onblur失去焦點(diǎn)時(shí)觸發(fā)失去焦點(diǎn)時(shí)觸發(fā)onfocus獲得焦點(diǎn)時(shí)觸發(fā)獲得焦點(diǎn)時(shí)觸發(fā)onclick鼠標(biāo)單擊時(shí)觸發(fā)鼠標(biāo)單擊時(shí)觸發(fā)JavaScript事件及應(yīng)用雅虎郵箱注冊改進(jìn)版雅虎郵箱注冊改進(jìn)版2 td font-family:“新宋體新宋體” ; font-size:14px; !- function enableButton() if(document.myform.tiaokuan.checked) document.myform.sub.disabled = false ; else document.

13、myform.sub.disabled = true ; function checkForm() var cks = document.myform.mail_directory;var ischeck = false ;for(var i = 0 ; i 中國雅虎直郵中國雅虎直郵   我愿意接受中國雅虎的直郵，請選擇以下直郵類別我愿意接受中國雅虎的直郵，請選擇以下直郵類別(必須選一個(gè)，必須選一個(gè)，可多選可多選)   旅游旅游 休閑休閑 財(cái)經(jīng)財(cái)經(jīng) 汽車汽車 音樂音樂 房產(chǎn)房產(chǎn) 中國雅虎服務(wù)條款中國雅虎服務(wù)條款   我已經(jīng)閱讀并同意中國雅虎

14、的服務(wù)條款和隱私權(quán)政策我已經(jīng)閱讀并同意中國雅虎的服務(wù)條款和隱私權(quán)政策   1. 接受條款接受條款歡迎光臨中國雅虎。中國雅虎根據(jù)以下服務(wù)條款為您提供服務(wù)。這些條款可由中國雅虎隨時(shí)更新，且歡迎光臨中國雅虎。中國雅虎根據(jù)以下服務(wù)條款為您提供服務(wù)。這些條款可由中國雅虎隨時(shí)更新，且毋須另行通知。中國雅虎服務(wù)公約毋須另行通知。中國雅虎服務(wù)公約(以下簡稱本以下簡稱本“服務(wù)公約服務(wù)公約”)一旦發(fā)生變動(dòng)一旦發(fā)生變動(dòng), 中國雅虎將在網(wǎng)頁上公布中國雅虎將在網(wǎng)頁上公布修改內(nèi)容。修改后的服務(wù)公約一旦在網(wǎng)頁上公布即有效代替原來的服務(wù)公約。您可隨時(shí)造訪修改內(nèi)容。修改后的服務(wù)公約一旦在網(wǎng)頁上公布即有效代替原

15、來的服務(wù)公約。您可隨時(shí)造訪 查閱最新查閱最新版服務(wù)公約。此外，當(dāng)您使用中國雅虎特殊服務(wù)時(shí)，您和中國雅虎應(yīng)遵守中國雅虎隨時(shí)公布的與該服版服務(wù)公約。此外，當(dāng)您使用中國雅虎特殊服務(wù)時(shí)，您和中國雅虎應(yīng)遵守中國雅虎隨時(shí)公布的與該服務(wù)相關(guān)的指引和規(guī)則務(wù)相關(guān)的指引和規(guī)則 JavaScript事件及應(yīng)用下拉列表框?qū)ο笙吕斜砜虻氖∈屑壜?lián)功能，例如搜狐房產(chǎn)屬性屬性length返回下拉框中的選項(xiàng)總數(shù)返回下拉框中的選項(xiàng)總數(shù)selectedIndex返回被選中的選項(xiàng)的索引號，從返回被選中的選項(xiàng)的索引號，從0開始；設(shè)置該屬性值來改變當(dāng)開始；設(shè)置該屬性值來改變當(dāng)前選中的選項(xiàng)前選中的選項(xiàng)options所有的選項(xiàng)組成的一個(gè)數(shù)

16、組所有的選項(xiàng)組成的一個(gè)數(shù)組value被選中的選項(xiàng)的被選中的選項(xiàng)的value屬性值屬性值事件事件onblur失去焦點(diǎn)時(shí)觸發(fā)失去焦點(diǎn)時(shí)觸發(fā)onfocus獲得焦點(diǎn)時(shí)觸發(fā)獲得焦點(diǎn)時(shí)觸發(fā)onchange選項(xiàng)發(fā)生改變時(shí)觸發(fā)選項(xiàng)發(fā)生改變時(shí)觸發(fā)JavaScript事件及應(yīng)用搜狐房產(chǎn)搜狐房產(chǎn)spanfont-family:新宋體新宋體; font-size:14px; 新房新房 寫字樓寫字樓 商鋪商鋪 別墅別墅 新房新房寫字樓寫字樓商鋪商鋪別墅別墅選擇區(qū)縣選擇區(qū)縣海淀區(qū)海淀區(qū)崇文區(qū)崇文區(qū)東城區(qū)東城區(qū)西城區(qū)西城區(qū)朝陽區(qū)朝陽區(qū)物業(yè)類型物業(yè)類型普通住宅普通住宅公寓公寓別墅別墅經(jīng)濟(jì)適用房經(jīng)濟(jì)適用房選擇價(jià)格選擇價(jià)格300

17、0以下以下3000-50005000-100001-3萬萬3萬以上萬以上JavaScript事件及應(yīng)用屬性屬性描述描述srcElement產(chǎn)生該事件的元素產(chǎn)生該事件的元素type以字符串形式返回事件類型，比如以字符串形式返回事件類型，比如“click”clientX相對用戶區(qū)域的相對用戶區(qū)域的x坐標(biāo)坐標(biāo)clientY相對用戶區(qū)域的相對用戶區(qū)域的y坐標(biāo)坐標(biāo)screenX相對實(shí)際屏幕的相對實(shí)際屏幕的x坐標(biāo)坐標(biāo)screenY相對實(shí)際屏幕的相對實(shí)際屏幕的y坐標(biāo)坐標(biāo)button確定是哪個(gè)鼠標(biāo)被按下確定是哪個(gè)鼠標(biāo)被按下keyCode按鍵的代碼按鍵的代碼altKeyalt鍵按下時(shí)為鍵按下時(shí)為truectrlKeyc