網頁設計與制作注冊事件授課教師：喬振華HTMLCSSJavaScriptJavaScript目錄CONTENTS12學習目標知識講解3小結學習目標01學習目標學習目標01了解JavaScript事件學習目標02會編寫注冊事件02知識點講解

01JavaScript中有哪些事件？

03如何編寫事件？思考知識點講解

02表單中用到了哪些事件？1、JavaScript事件JavaScript事件（event）是當用戶與網頁進行交互時發生的事情，例如鼠標單機某個導航鏈接或按鈕、在表單中輸入文本、按下鍵盤上的某個按鍵、移動鼠標等等。當事件發生時，我們可以使用JavaScript中的事件處理程序（也可稱為事件監聽器）來檢測并執行某些特定的程序。一般情況下事件的名稱都是以“on”開頭，例如點擊事件onclick、獲取焦點onfocus、失去焦點onblur等。下表中列舉了一些JavaScript中常用的事件：常見事件事件描述鼠標事件click用戶單擊鼠標時觸發此事件dblclick用戶雙擊鼠標時觸發此事件mousedown用戶按下鼠標時觸發此事件mouseup用戶按下鼠標后松開鼠標時觸發此事件mouseover當用戶將鼠標移動到某對象范圍的上方時觸發此事件mousemove用戶移動時鼠標觸發此事件mouseout當用戶鼠標離開某對象范圍時觸發此事件鍵盤事件keypress當用戶鍵盤上的某個字符鍵被按下并且釋放時觸發此事件keydown當用戶鍵盤上某個按鍵被按下時觸發此事件keyup當用戶鍵盤上某個按鍵被按下后松開時觸發此事件窗口事件abort當圖形尚未完全加載前，用戶就單擊了一個超鏈接，或單擊停止按鈕時觸發此事件error加載文件或圖像發生錯誤時觸發此事件load頁面內容加載完成時觸發此事件resize當瀏覽器的窗口大小被改變時觸發此事件unload當前頁面關閉或退出時觸發此事件表單事件blur當前表單元素失去焦點時觸發此事件click用戶單擊復選框、單選按鈕或button、submit和reset按鈕時觸發此事件change表單元素的內容發生改變并且元素失去焦點時觸發此事件focus當表單元素獲得焦點時觸發此事件reset用戶單擊表單上的reset按鈕時會觸發此事件select用戶選擇了一個input或textarea表單域中的文本時觸發此事件submit用戶單擊submit按鈕提交表單時觸發此事件2、事件綁定事件只有與HTML元素綁定之后才能被觸發。在JavaScript中，有三種常用的綁定事件的方法：1、在DOM元素中直接綁定；2、在JavaScript代碼中綁定；3、綁定事件監聽函數。2.1在DOM元素中直接綁定即在DOM元素上綁定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等，如下<inputtype="button"value="點擊"onclick="alert('Hello')"/>2.2在JavaScript代碼中綁定即在JavaScript代碼中（即script標簽內）綁定事件，如下<script>

document.getElementById("btn").onclick=function(){ alert("hello"); }</script><inputid=“btn”type="button"value="點擊"/>2.3綁定事件監聽函數事件監聽有3個階段：語法：element.addEventListener('事件',監聽函數,捕捉/冒泡)語法解析：事件:（必需）事件名，支持所有DOM事件。function（監聽函數）：（必需）指定要事件觸發時執行的函數。useCapture（是否捕捉）：（可選）指定事件是否在捕獲或冒泡階段執行。true，捕獲。false，冒泡。默認false。目標階段B冒泡階段C捕獲階段A2.3綁定事件監聽函數<script>functionhello(){

alert("你好");

}varbtn=document.getElementById("btn");btn.addEventListener("click",hello);</script><<inputid="btn"type="button"value="點擊"/>2.4焦點事件2.4焦點事件在html頁面中，諸如按鈕、文本框等可視元素都具有擁有和失去焦點的事件，以表單為例。<script>functionof(){

document.getElementById("sp").innerHTML="獲取焦點";

}

functionob(){

document.getElementById("sp").innerHTML="失去焦點";

}</script><inputid="btn"type="text"onfocus="of()"onblur="ob()"/><spanid="sp"></span>03小結小結本節內容講解了JavaScript中的事件，要