您好,登錄后才能下訂單哦!
本文小編為大家詳細介紹“javascript事件處理的過程是什么”,內容詳細,步驟清晰,細節處理妥當,希望這篇“javascript事件處理的過程是什么”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。
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 | 當前頁面將被改變時觸發此事件 |
事件 | 說明 | |
表單相關事件 | onblur | 當前元素失去焦點時觸發此事件 |
onchange | 當前元素失去焦點并且元素的內容發生改變時觸發此事件 | |
onfocus | 當某個元素獲得焦點時觸發此事件 | |
onreset | 當表單中RESET的屬性被激活時觸發此事件 | |
onsubmit | 一個表單被遞交時觸發此事件 | |
滾動字幕事件 | onbounce | 在Marquce內的內容移動至Marquce品示范圍之外時觸發此事件 |
onfinish | 當Marquce元素完成需嬰顯示的內容后觸發此事件當Marquce元素開始顯示內容時觸發此事件 | |
onstart | Marquce元素開始顯示內容時觸發此事件 | |
編輯事件 | onbeforecopy | 當頁面當前被選擇內容將要復制到瀏覽者系統的剪貼板前觸發此事件 |
onbeforecut | 當頁面中的部分或全部內容被剪切到瀏覽者系統剪貼板時能發此事件 | |
onbeforeeditfocus | 當前元素將要進入編輯狀態時觸發此事件 | |
onbeforepaste | 當要將內容從瀏覽者的系統剪貼板中粘貼到頁面上時觸發此事件 | |
onbeforeupdate | 當瀏覽者粘貼系統剪貼板中的內容時通知目標對象 | |
oncontextmenu | 當瀏覽者按下鼠標右鍵出現菜單時或者通過鍵盤的按鍵觸發頁面菜單時觸發此事件 | |
oncopy | 當頁面當前的被選擇內容被復制后觸發此事件 | |
oncut | 當頁面當前的被選擇內容被剪切時觸發此事件 | |
ondrag | 當某個對象被拖動時觸發此事件(活動事件) | |
ondragend | 當鼠標拖動結束時觸發此事件,即鼠標的按鈕被釋放時 | |
ondragente | 當對象被鼠標拖動進入其容器范圍內時觸發此事件 | |
ondragleave | 當對象被鼠標拖動的對象離開其容器范圍內時觸發此事件 | |
ondragover | 當被拖動的對象在另一對象容器范圍內拖動時觸發此事件 | |
ondragstart | 當某對象將被拖動時觸發此事件 | |
ondrop | 在一個拖動過程中,釋放鼠標鍵時觸發此事件 | |
onlosecapture | 當元素失去鼠標移動所形成的選擇焦點時觸發此事件 | |
onpaste | 當內容被粘貼時觸發此事件 | |
onselect | 當文本內容被選擇時觸發此事件 | |
onselectstart | 當文本內容的選擇將開始發生時觸發此事件 |
事件 | 說明 | |
數據綁定事件 | onafterupdate | 當數據完成由數據源到對象的傳送時觸發此事件 |
oncellchange | 當數據來源發生變化時觸發此事件 | |
ondataavailable | 當數據接收完成時觸發此事件 | |
ondatasetchanged | 數據在數據源發生變化時觸發此事件 | |
ondatasetcomplete | 當數據源的全部有效數據讀取完畢時觸發此事件 | |
onerrorupdate | 當使用onbeforeupdate事件觸發取消了數據傳送時,代替afterupdate事件 | |
數據綁定事件 | onrowenter | 當前數據源的數據發生變化井且有新的有效數據時觸發此事件 |
onrowexit | 當前數據源的數據將要發生變化時觸發此事件 | |
onrowsdelete | 當前數據記錄將被刪除時觸發此事件 | |
onrowsinserted | 當前數據源將要插入新數據記錄時觸發此事件 | |
外部事件 | onafterprint | 當文檔被打印后觸發此事件 |
onbeforeprint | 當文檔即將打印時觸發此事件 | |
onfilterchange | 當某個對象的濾鏡效果發生變化時觸發此事件 | |
onhelp | 當瀏覽者按下F1鍵或者單擊瀏覽器的幫助菜單時觸發此事件 | |
onpropertychange | 當對象的屬性之一發生變化時觸發此事件 | |
onreadystatechange | 當對象的初始化屬性值發生變化時觸發此事件 |
事件處理程序的調用
在使用事件處理程序對頁面進行操作時,最重要的是如何通過對象的事件來指定事件處理程序。
在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標記中添加相應的事件,并在其中指定要執行的代碼或函數名即可。
讀到這里,這篇“javascript事件處理的過程是什么”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注億速云行業資訊頻道。<input name="bt_save" type="button" value="保存" onclick="clickFunction();"/>
<script language="JavaScript" type="text/javascript">
function clickFunction(){
alert("單擊了保存按鈕");
}
</script>
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。