網(wǎng)頁設(shè)計與制作（活頁式） 課件 情景9-6事件

網(wǎng)頁設(shè)計與制作注冊事件授課教師：喬振華HTMLCSSJavaScriptJavaScript目錄CONTENTS12學(xué)習(xí)目標(biāo)知識講解3小結(jié)學(xué)習(xí)目標(biāo)01學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)01了解JavaScript事件學(xué)習(xí)目標(biāo)02會編寫注冊事件02知識點(diǎn)講解

01JavaScript中有哪些事件？

03如何編寫事件？思考知識點(diǎn)講解

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

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

alert("你好");

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

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

}

functionob(){

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

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