JavaScript Vue.js前端開發(fā)任務(wù)驅(qū)動式教程-課件 模板七 JavaScript事件處理及應(yīng)用_第1頁
JavaScript Vue.js前端開發(fā)任務(wù)驅(qū)動式教程-課件 模板七 JavaScript事件處理及應(yīng)用_第2頁
JavaScript Vue.js前端開發(fā)任務(wù)驅(qū)動式教程-課件 模板七 JavaScript事件處理及應(yīng)用_第3頁
JavaScript Vue.js前端開發(fā)任務(wù)驅(qū)動式教程-課件 模板七 JavaScript事件處理及應(yīng)用_第4頁
JavaScript Vue.js前端開發(fā)任務(wù)驅(qū)動式教程-課件 模板七 JavaScript事件處理及應(yīng)用_第5頁
已閱讀5頁，還剩17頁未讀， 繼續(xù)免費閱讀

付費下載

下載本文檔

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

文檔簡介

JavaScript事件處理及應(yīng)用時間：匯報人：JavaScript+Vue.js前端開發(fā)任務(wù)驅(qū)動式教程1.認知JavaScript的事件2.JavaScript的鼠標事件和鍵盤事件3.頁面事件4.表單及表單控件事件5.編輯事件6.event對象7.JavaScript的事件方法8.JavaScript的異常處理9.JavaScript代碼的調(diào)試目錄事件驅(qū)動是指由于某種原因（單擊鼠標或按鍵操作等）觸發(fā)某項事先定義的事件，從而執(zhí)行處理程序。JavaScript通過對HTML事件進行響應(yīng)來獲得與用戶的交互，HTML事件可以是瀏覽器或用戶做的某些事情。當用戶單擊一個按鈕或者在某段文字上移動鼠標指針時，就觸發(fā)了一個單擊事件或鼠標指針移動事件，通過對這些事件的響應(yīng)可以完成特定的功能。例如，單擊按鈕后彈出對話框、鼠標指針移動到文本上后文本改變顏色等。事件就是用戶與Web頁面交互時產(chǎn)生的操作，當用戶進行單擊按鈕等操作時，即產(chǎn)生了一個事件，需要瀏覽器對其進行處理。瀏覽器響應(yīng)事件并進行處理的過程稱為事件處理。認知JavaScript的事件Web頁面觸發(fā)事件的原因主要如下。①網(wǎng)頁加載完成。②網(wǎng)頁被關(guān)閉。③頁面之間跳轉(zhuǎn)。④網(wǎng)頁的表單被提交。⑤網(wǎng)頁中輸入的數(shù)據(jù)需要驗證。⑥網(wǎng)頁表單控件中輸入的內(nèi)容被修改。⑦網(wǎng)頁中的按鈕被單擊。⑧網(wǎng)頁內(nèi)部對象的交互，包括選定、離開、改變頁面對象等。JavaScript允許在事件被監(jiān)聽到時執(zhí)行代碼，通過JavaScript代碼可向HTML元素添加事件處理程序。認知JavaScript的事件JavaScript代碼可以置于雙引號中，也可以置于單引號中。（1）置于雙引號中。例如：<elementevent="一些JavaScript代碼">（2）置于單引號中。例如：<elementevent='一些JavaScript代碼'>以下代碼中，onclick屬性及其代碼被添加到<input>元素上，并且JavaScript代碼改變了id="demo"的元素的內(nèi)容。<pid="demo"></p><inputtype="button"value="現(xiàn)在的時間是？"onclick="document.getElementById('demo').innerHTML=Date()">JavaScript代碼通常有很多行，事件屬性調(diào)用函數(shù)更為常見，例如：<inputtype="button"value="現(xiàn)在的時間是？"onclick="displayDate()">functiondisplayDate(){document.getElementById('demo').innerHTML=Date();}以下代碼中，使用this.value改變了其自身元素的內(nèi)容。<inputtype="button"value="請單擊"onclick="this.value='單擊成功'">認知JavaScript的事件1．鼠標事件JavaScript中常用的鼠標事件有以下幾種。（1）onClick事件：單擊鼠標按鍵時觸發(fā)。（2）onDblClick事件：雙擊鼠標按鍵時觸發(fā)。（3）onMouseDown事件：按下鼠標按鍵時觸發(fā)。（4）onMouseUp事件：釋放鼠標按鍵時觸發(fā)。（5）onMouseOver事件：鼠標指針移動到頁面元素上方時觸發(fā)。（6）onMouseOut事件：鼠標指針離開某對象范圍時觸發(fā)。（7）onMouseMove事件：鼠標指針在頁面上移動時觸發(fā)。JavaScript的鼠標事件和鍵盤事件2．鍵盤事件JavaScript中常用的鍵盤事件有以下幾種。（1）keypress事件：當鍵盤上的某個鍵被按下且釋放時觸發(fā)。（2）keydown事件：當鍵盤上的某個鍵被按下時觸發(fā)。（3）keyup事件：當鍵盤上的某個鍵被釋放時觸發(fā)。JavaScript的鼠標事件和鍵盤事件頁面事件是指window對象的事件，JavaScript中常用的頁面事件有以下幾種。（1）onLoad事件：當前頁面或圖像被加載完成時觸發(fā)。（2）onUnload事件：當前的網(wǎng)頁將被關(guān)閉或從當前頁面跳轉(zhuǎn)到其他網(wǎng)頁時觸發(fā)。（3）onMove事件：當瀏覽器窗口被移動時觸發(fā)。（4）onResize事件：當瀏覽器的窗口尺寸被改變時觸發(fā)。（5）onScroll事件：當瀏覽器滾動條的位置發(fā)生變化時觸發(fā)。頁面事件表單及表單控件事件JavaScript中常用的表單及表單控件事件有以下幾種。（1）onBlur事件：頁面上當前表單控件失去焦點時觸發(fā)。（2）onChange事件：頁面上當前表單控件失去焦點且其內(nèi)容發(fā)生改變時觸發(fā)。onChange事件常用于對控件的輸入內(nèi)容進行驗證。例如，當用戶輸入或改變輸入字段的內(nèi)容且當前表單控件失去焦點時，會將輸入的文本轉(zhuǎn)換為大寫形式，代碼如下。<inputtype="text"id="fname1"onchange="this.value=this.value.toUpperCase();">（3）onFocus事件：當頁面上表單控件獲得焦點時觸發(fā)。例如，當輸入字段獲得焦點時，改變其背景顏色，代碼如下。<inputtype="text"onfocus="this.style.background='red'">（4）onReset事件：頁面上表單元素的值被重置（清空）時觸發(fā)。（5）onSubmit事件：頁面上表單被提交時觸發(fā)。JavaScript中常用的編輯事件有以下幾種。（1）onSelect事件：當頁面的文本內(nèi)容被選擇時觸發(fā)。（2）onBeforeCut事件：當頁面中的一部分或全部內(nèi)容被剪切到瀏覽者的系統(tǒng)剪貼板時觸發(fā)。（3）onBeforeCopy事件：當頁面中當前選中的內(nèi)容被復(fù)制到瀏覽者的系統(tǒng)剪貼板前觸發(fā)。（4）onBeforePaste事件：當頁面內(nèi)容將要從瀏覽者的系統(tǒng)剪貼板粘貼到頁面上時觸發(fā)。（5）onCut事件：當頁面中當前選中內(nèi)容被剪切時觸發(fā)。（6）onCopy事件：當頁面中當前選中內(nèi)容被復(fù)制后觸發(fā)。（7）onPaste事件：當頁面內(nèi)容被粘貼時觸發(fā)。（8）onBeforeEditFocus事件：當前元素將要進入編輯狀態(tài)時觸發(fā)?？梢岳迷撌录苊鉃g覽者在填寫信息時，對驗證信息（如密碼文本框中的信息）進行粘貼。編輯事件event對象代表事件的狀態(tài)，如觸發(fā)event對象的元素和鼠標指針的位置及狀態(tài)、按下的鍵等。event對象只在事件發(fā)生的過程中才有效，其主要屬性如下。（1）event.altKey：檢查【Alt】鍵的狀態(tài)。（2）event.button：檢查用戶所按的鼠標按鍵，0表示沒有按鍵，1表示按左鍵，2表示按右鍵，3表示按左鍵和右鍵，4表示按中間鍵，5表示按左鍵和中間鍵，6表示按右鍵和中間鍵，7表示按所有鍵。該屬性只用于onMouseDown、onMouseUp、onMouseMove事件，對于其他事件，不管鼠標按鍵狀態(tài)如何，都返回0。（3）event.keyCode：檢查鍵盤事件對應(yīng)的內(nèi)碼，如鍵盤的【←】【↑】【→】【↓】鍵對應(yīng)的內(nèi)碼為37、38、39、40。（4）event.shiftKey：檢查【Shift】鍵的狀態(tài)。event對象（5）event.srcElement：返回觸發(fā)事件的元素。（6）event.type：返回事件名稱。（7）event.x和event.y：返回鼠標指針相對于具有position屬性的上級元素的x和y坐標。如果沒有具有position屬性的上級元素，則默認以<body>元素作為參考對象。例如，當鼠標指針在頁面上移動時，鼠標指針移動事件（onMouseMove）被觸發(fā)，event對象中存儲了該事件的一些屬性，其中event.x和event.y存儲了事件發(fā)生位置的頁面坐標。event對象JavaScript的事件方法用于觸發(fā)對應(yīng)的事件，即通過代碼觸發(fā)事件，常用的事件方法如表7-1所示。JavaScript的事件方法在JavaScript中，異常（Exception）是指程序在執(zhí)行過程中遇到的錯誤或異常情況，當JavaScript引擎執(zhí)行JavaScript代碼時，可能會出現(xiàn)以下異常。（1）因程序員的編碼錯誤或錯別字導(dǎo)致的語法異常。（2）瀏覽器不支持某些JavaScript功能導(dǎo)致的異常（可能由瀏覽器差異引起）。（3）來自服務(wù)器或用戶的錯誤輸入而導(dǎo)致的異常。（4）許多其他不可預(yù)知的原因?qū)е碌奈粗惓！avaScript的異常處理JavaScript提供了以下異常處理語句。1．try…catch…語句當錯誤發(fā)生或事件出現(xiàn)問題時，JavaScript將拋出異常。JavaScript使用try…catch…語句處理這些異常，try語句和catch語句總是成對出現(xiàn)的。語法格式如下。try{//供測試的代碼塊}catch(err){//處理錯誤的代碼塊}其中，try語句用于測試代碼塊的錯誤，允許用戶定義在執(zhí)行時進行錯誤測試的代碼塊；catch語句用于處理錯誤，允許定義當try代碼塊發(fā)生錯誤時所執(zhí)行的代碼塊。在下面的示例代碼中，故意在try代碼塊的代碼中將“alert”寫成“Alert”，即將首字母寫為“A”，catch代碼塊會捕捉到try代碼塊中的錯誤，并執(zhí)行代碼來處理它。JavaScript的異常處理例子：代碼如下。vartxt="";try{Alert("歡迎您!");}catch(err){txt="本頁有一個錯誤。\n";txt+="錯誤描述："+err.message;alert(txt);}瀏覽網(wǎng)頁demo0701.html時，會彈出圖7-1所示的錯誤提示信息警告框JavaScript的異常處理2．throw語句throw語句允許用戶自行定義錯誤或拋出異常。如果把throw與try和catch一起使用，則能夠控制程序流，并生成自定義的錯誤消息。語法格式如下。throwexceptionexception可以是JavaScript字符串、數(shù)字、布爾值或?qū)ο蟆avaScript的異常處理代碼如下。functionmyFunction(){try{varx=document.getElementById("demo").value;if(x=="")throw"值為空";if(isNaN(x))throw"不是數(shù)字";}catch(err){vary=document.getElementById("mess");y.innerHTML="錯誤："+err+"。";}}</script><inputid="demo"type="text"><inputtype="button"onclick="myFunction()"value="測試輸入值"><pid="mess"></p>JavaScript的異常處理以上示例代碼用于檢測輸入的值。如果值是錯誤的，則會拋出一個錯誤（異常）。catch會捕捉到這個錯誤，并顯示一段自定義的錯誤信息。在以上示例代碼中，如果getElementById()函數(shù)出錯，則也會拋出一個錯誤。如果輸入框中沒有輸入字符或數(shù)值，則直接單擊“測試輸入值”按鈕時，會出現(xiàn)“錯誤：值為空。”的提示信息；如果在輸入框中輸入字母“a”，則單擊“測試輸入值”按鈕時，會出現(xiàn)“錯誤：不是數(shù)字?！钡奶崾拘畔?；如果在輸入框中輸入數(shù)字“23”，則單擊“測試輸入值”按鈕，不會出現(xiàn)提示信息。3．finally語句finally語句是允許在try和catch之后執(zhí)行的代碼，并且這些代碼無論結(jié)果如何都執(zhí)行。語法格式如下。try{//供測試的代碼塊}catch(err){//處理錯誤的代碼塊}finally{//無論結(jié)果如何都執(zhí)行的代碼塊}JavaScript的異常處理在沒有調(diào)試器的情況下編寫JavaScript代碼是有一定難度的，因為JavaScript代碼中可能會包含語法錯誤或者邏輯錯誤，如果沒有調(diào)試工具，則這些錯誤難以診斷。通常，如果JavaScript代碼包含錯誤，則不會有錯誤信息，也不會有任何可供查找錯誤的指示信息。1．使用JavaScript調(diào)試器查找JavaScript代碼中的錯誤被稱為代碼調(diào)試，調(diào)試并不簡單

溫馨提示

  • 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)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論