javascript事件處理過程分為幾步
- 青灯夜游原創
- 2022-10-12 17:45:313333瀏覽
javascript事件處理過程分為三個步驟：1、發生事件；2、啟動事件處理程序；3、事件處理程序做出反應。其中，要使事件處理程序能夠啟動，必須透過指定的物件來呼叫對應的事件，然後透過該事件呼叫事件處理程序。
本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
JavaScript是基於物件（object-based）的語言，它的一個最基本的特徵就是採用事件驅動（event-driven）。可以使在圖形介面環境下的一切操作變得簡單。透過滑鼠或熱鍵的動作稱為事件（event）。由滑鼠或熱鍵引發的一連串程式動作，稱為事件驅動（event driver），而對事件進行處理的程式或函數，稱為事件處理程序（event handler）。
事件與事件處理概述
事件處理是物件化程式設計的個很重要的環節，它可以使程式的邏輯結構更加清晰，使程式更具有彈性，提高了程式的開發效率。
事件處理的過程分為三個步驟：
①發生事件;
②啟動事件處理程序;
③事件處理程序做出反應。
其中，要使事件處理程序能夠啟動，必須透過指定的物件來呼叫對應的事件，然後透過該事件呼叫事件處理程序。事件處理程序可以是任意JavaScript語句，但一般都會用特定的自訂函數(function) 來處理事件。
事件與事件名稱
事件是一些可以透過腳本回應的頁面動作。當使用者按下滑鼠鍵或提交表單， 甚至在頁面上移動滑鼠時，事件就會出現。事件處理是一段 JavaScript程式碼，總是與頁面中的特定部分以及一定的事件相關聯。當與頁面特定部分關聯的事件發生時，事件處理器就會被呼叫。
絕大多數事件的命名都是描述性的，很容易理解。例如click. submit. mousecover 等，透過名稱就可以猜測其意義。但也有少數事件的名稱不易理解，例如blur (英文的字面意思為“模糊”)，表示一個域或 一個表單失去焦點。通常，事件處理器的命名原則是， 在事件名稱前加上前綴on.例如，對於click事件，其處理器名為onclick.
JavaScript的常用事件
時#
| 說明 | ||
| 滑鼠鍵盤事件 | onclick | 滑鼠點擊時觸發此事件 |
| #ondblclick | 滑鼠雙擊時觸發此事件 | |
| onmousedown | 按下滑鼠時觸發此事件 | |
| onmouseup | 滑鼠按下後放開滑鼠時觸發此事件 | |
| #onmouscover | 當滑鼠移到某個物件範圍的上方時觸發此事件 | |
| onmousemove | 滑鼠移動時觸發此事件 | |
| onmouscout | #當滑鼠離開某個物件範圍時觸發此事件 | |
| onkeypress | 當鍵盤上的某個鍵被按下並且釋放時觸發此事件 | |
| onkeydown | 當鍵盤上某個按鍵被按下時觸發此事件 | |
| onkeyup | 當鍵盤上某個按鍵被按下後放開時觸發此事件 | |
| 頁面相關事件 | onabort | 圖片在下載時被用戶中斷時觸發此事件 |
| onbeforeunload | 目前頁面的內容將要改變時觸發此事件 | |
| onerror | 出現錯誤時觸發此事件 | |
| onload | 頁面內容完成時觸發此事件(也就是頁面載入事件) | |
| #onresize | 當瀏覽器的視窗大小被改變時觸發此事件 | |
| #onunload | 目前頁面將被改變時觸發此事件 |
| 事件 | #說明 | |
| ##表單相關事件 | ||
| 當目前元素失去焦點時觸發此事件 | ||
| 當前元素失去焦點並且元素的內容改變時觸發此事件 | ||
| 當某個元素獲得焦點時觸發此事件 | ||
| 當表單中RESET的屬性被啟動時觸發此事件 | onsubmit | 一個表單被遞交時觸發此事件 |
| 滾動字幕事件 | ||
| 在Marquce內的內容移動至Marquce品示範圍之外時觸發此事件 | ||
| 當Marquce元素完成需嬰顯示的內容後觸發此事件當Marquce元素開始顯示內容時觸發此事件 | #onstart | Marquce元素開始顯示內容時觸發此事件 |
| #編輯事件 | ||
| 當頁面目前被選擇內容將要複製到瀏覽者係統的剪貼簿前觸發此事件 | ||
| 當頁面中的部分或全部內容被剪下到瀏覽者係統剪貼簿時能發此事件 | ||
| 當前元素將要進入編輯狀態時觸發此事件 | ||
| 當要將內容從瀏覽者的系統剪貼簿中貼上到頁面上時觸發此事件 | ||
| 當瀏覽者貼上系統剪貼簿中的內容時通知目標物件 | ||
| 當瀏覽者按下滑鼠右鍵出現選單時或透過鍵盤的按鍵觸發頁面選單時觸發此事件 | ||
| 當頁面目前的被選擇內容被複製後觸發此事件 | ||
| 當頁面目前的被選擇內容被剪下時觸發此事件 | ||
| 當某個物件被拖曳時觸發此事件(活動事件) | ||
| ondragente | ||
| 當物件被滑鼠拖曳的物件離開其容器範圍內時觸發此事件 | ||
| ondragstart | ||
| 在一個拖曳過程中，釋放滑鼠鍵時觸發此事件 | ||
| #當元素失去滑鼠移動所形成的選擇焦點時觸發此事件 | ||
| 當內容被貼上時觸發此事件 |
| 事件 | # 說明 | |
| ##資料綁定事件 | onafterupdate當資料完成由資料來源到物件的傳送時觸發此事件 | |
| 當資料來源變更時觸發此事件 | ||
| 當資料接收完成時觸發此事件 | ||
| 資料在資料來源變更時觸發此事件 | ||
| 當資料來源的全部有效資料讀取完畢時觸發此事件 | ||
| 當使用onbeforeupdate事件觸發取消了資料傳送時，取代afterupdate事件 | ||
| #資料綁定事件 | onrowenter目前資料來源的資料發生變化井且有新的有效資料時觸發此事件 | |
| 當前資料來源的資料將要發生變化時觸發此事件 | ||
| 當前資料記錄將被刪除時觸發此事件 | ||
| 目前資料來源將要插入新資料記錄時觸發此事件 | ||
| 外部事件 | onafterprint當文件被列印後觸發此事件 | |
| 當文件即將列印時觸發此事件 | ||
| 當某個物件的濾鏡效果變更時觸發此事件 | ||
| 當瀏覽者按下F1鍵或點擊瀏覽器的幫助選單時觸發此事件 | ||
| 當物件的屬性之一變更時觸發此事件 | ||
| 當物件的初始化屬性值發生變化時觸發此事件 |
##事件處理程序的呼叫在使用事件處理程序對頁面進行操作時，最重要的是如何透過物件的事件來指定事件處理程序。
1.在JavaScript中在JavaScript中呼叫事件處理程序，首先需要取得要處理物件的引用，然後將要執行的處理函數賦值給對應的事件。
程式碼：
<input id="save" name="bt_save" type="button" value="保存" />
<script language="JavaScript" type="text/javascript">
var b_save=document.getElementById("save");
b_save.onclick=function(){
alert("单击了保存按钮");
}
</script>
##在HTML中指派事件處理程序，只需要在HTML標記中新增對應的事件，並在其中指定要執行的程式碼或函數名稱即可。 <input name="bt_save" type="button" value="保存" onclick="clickFunction();"/>
<script language="JavaScript" type="text/javascript">
function clickFunction(){
alert("单击了保存按钮");
}
</script>
【相關推薦：javascript影片教學
、程式設計影片】
以上是javascript事件處理過程分為幾步的詳細內容。更多資訊請關注PHP中文網其他相關文章！