《事件和事件處理》PPT課件.ppt
JavaScript程序設計,第五章事件和事件處理,5.1理解事件,事件概述事件是瀏覽器響應用戶操作的機制,說明了用戶與Web頁面交互時產(chǎn)生的操作。事件可以向瀏覽器表明有操作發(fā)生,需要瀏覽器處理。瀏覽器可以監(jiān)聽事件,在事件發(fā)生時做出反應,進行相應的處理工作。這種監(jiān)聽、響應事件并進行處理的過程被稱為事件處理。有些事件可以被瀏覽器自動監(jiān)聽,由瀏覽器自動觸發(fā),例如:窗體的load事件。有些事件是用來執(zhí)行某段代碼以響應用戶請求的,由人工編寫程序進行定義的,當特定的事件發(fā)生時,執(zhí)行這個事件對應的代碼,以完成預期的事件處理。在JavaScript中,事件分很多種,如鼠標事件,鍵盤事件,HTML事件,變動事件,5.2鼠標事件,鼠標事件:單擊過程中,拖標事件是指鼠標狀態(tài)的改變,包括鼠標在移動過程中動過程中等所有鼠標狀態(tài)改變都會觸發(fā)事件。常用的鼠標事件有onclick單擊事件,ondbClick雙擊事件,onmouseout鼠標離開事件,onmouseover鼠標移到上方事件,onmouseup鼠標放開按鍵事件,onmousedown鼠標按下事件,5.2.1onclick單擊事件,Onclick事件在鼠標單擊某表單域時觸發(fā)。單擊是指鼠標停留在對象上,按下鼠標按鍵,沒有移動鼠標而放開鼠標按鍵這一完整過程。例如要求單擊“保存”按鈕時,提交當前表單Functionbtnsave()document.form0.submit();,5.2.2ondblClick雙擊事件,ondblClick事件在鼠標雙擊某表單域時觸發(fā),雙擊事件是在較短時間內連接兩次完成鼠標點擊。,5.2.3onmouseover鼠標移動到上方事件,Onmouseover事件在鼠標進入對象范圍(移到對象上方)時觸發(fā)。例如:當鼠標進入單元格時,觸發(fā)onmouseover事件,調用名稱為modStyle的事件處理函數(shù)完成單元格樣式的改變,onmouseover事件可以應用在所有的html元素中。例如:鼠標沒有經(jīng)過上面,5.2.4onmouseout鼠標離開事件,Onmouseout事件在鼠標離開對象時觸發(fā)。Onmouseout通常和onmouseover共同改變對象的狀態(tài)鼠標沒在上面,onmousedown鼠標按下事件onmousedown事件在用戶把鼠標放在對象上按下鼠標標使觸發(fā)。onmouseup鼠標放開按鍵事件onmouseup事件在用戶把鼠標放在對象上鼠標按鍵被按下的情況下,放開鼠標時觸發(fā)。如果接收鼠標按下事件的對象與鼠標鍵放開時的對象不是同一個對象,那么onmouseup事件不會觸發(fā)。,5.2.5鼠標按下和放開事件,5.2.6onselect選中事件,onselect事件在文本框或是文本域的內容被選中時(選中部分高亮顯示)觸發(fā)。onselect事件的具體過程是從鼠標按鍵被按下,到鼠標開始移動并選擇內容的過程。這個過程并不包括鼠標鍵的放開。,5.3鍵盤事件,鍵盤事件是指鍵盤狀態(tài)的改變。常用的鍵盤事件有onkeydown鍵盤事件,onkeypress按下鍵事件和onkeyup放開鍵事件,5.3.1onkeydown按鍵事件,Onkeydown事件在鍵盤的按鍵被按下時觸發(fā)。Onkeydown事件用于接收鍵盤的所有按鍵(包括功能鍵)被按下時的事件。Onkeydown事件與onkeypress事件都在按鍵按下時觸發(fā),但是兩者有區(qū)別。,5.3.2onkeypress按下事件,Onkeypress事件在鍵盤的按鍵被按下時觸發(fā)。Onkeypress事件與onkeydown事件兩者有先后順序,onkeypress事件是在onkeydown事件之后發(fā)生的。此外當按下任何任何按鍵時都會觸發(fā)onkeydown事件;但是onkeypress事件只在按下鍵盤的任一字符鍵(如A-Z數(shù)字鍵)是觸發(fā),但是單獨按下功能鍵,ctrl鍵,shift鍵,alt鍵等不會觸發(fā)onkeypress事件。,5.3.3onkeyup放開鍵事件,onkeyup事件在鍵盤的按鍵被按下然后放開時觸發(fā),5.4HTML事件,HTML事件是指HTML文件狀態(tài)改變時觸發(fā),用戶可以捕獲的事件。,HTML常用事件,用戶名:密碼:,onsubmit實例代碼onsubmittestfunctionsubmethod()varusername=document.getElementById("username").value;varpassword=document.getElementById("password").value;if(""=username|""=password)alert("用戶名或密碼空");returnfalse;elsereturntrue;,5.5變動事件,變動事件是指由于光標位置的改變引起的狀態(tài)的改變。,