BTC-CS-HTML-01-第9章-JavaScript事件處理課件

1、第9章JavaScript事件處理本章目標(biāo)了解事件相關(guān)的概念和作用掌握常用的事件類型、事件處理機(jī)制和原理以及三種注冊事件處理程序的方式能夠靈活的運用事件來實現(xiàn)HTML網(wǎng)頁中某些功能的擴(kuò)展2JavaScript事件概述事件是可以被 JavaScript 偵測到的行為，可以是瀏覽器行為，也可以是用戶行為.通過使用JavaScript，可以監(jiān)聽特定事件的發(fā)生，來實現(xiàn)某些功能的擴(kuò)展。3JavaScript事件概述事件類型UI(User Interface,用戶界面)事件，當(dāng)用戶與頁面上的元素交互時觸發(fā)；焦點事件，當(dāng)元素獲得或失去焦點時觸發(fā)；鼠標(biāo)事件，當(dāng)用戶通過鼠標(biāo)在頁面執(zhí)行操作時觸發(fā)；滾輪事件，當(dāng)使用

2、鼠標(biāo)滾輪（或類似設(shè)置）時觸發(fā)；文本事件，當(dāng)在文檔中輸入文本時觸發(fā)；鍵盤事件，當(dāng)用戶通過鍵盤在頁面上執(zhí)行操作時觸發(fā)；合成事件，當(dāng)為IME（Input MethodEditor，輸入法編輯器）輸入字符時觸發(fā)；變動（mutation）事件，當(dāng)?shù)讓覦OM結(jié)構(gòu)發(fā)生變化時觸發(fā)；4JavaScript事件概述UI事件UI事件指的是那些不一定與用戶操作有關(guān)的事件。5事件描述load當(dāng)頁面加載后在window上面觸發(fā)，當(dāng)所有框架加載完成后在框架上觸發(fā)，當(dāng)圖像加載完成后在元素上面觸發(fā)。unload當(dāng)頁面卸載后在window上面觸發(fā)abort當(dāng)用戶停止下載過程時，如果嵌入的內(nèi)容沒有加載完，則在元素上觸發(fā)error當(dāng)

3、發(fā)生JavaScript錯誤時在window上面觸發(fā)select當(dāng)用戶選擇文本框（input或textarea）或一個字符串時觸發(fā)resize當(dāng)窗口或框架大小變化時在window上面觸發(fā)scroll當(dāng)用戶滾動滾動條的元素中的內(nèi)容時，在元素上觸發(fā)JavaScript事件概述焦點事件焦點事件會在頁面得到焦點或失去焦點時觸發(fā)。鼠標(biāo)點擊可獲得光標(biāo)（即獲得焦點），Tab鍵可按照設(shè)置的Tabindex進(jìn)行切換焦點。6事件描述focus在得到焦點的元素上觸發(fā)，這個事件不會冒泡focusIn在得到焦點的元素上觸發(fā) ，這個事件會冒泡DOMFocusIn在得到焦點的元素上觸發(fā)，這個事件會冒泡DOMFocusOut

4、在失去焦點的元素上觸發(fā)blur在失去焦點的元素上觸發(fā)，這個事件不會冒泡focusout在失去焦點的元素上觸發(fā)，這個事件會冒泡JavaScript事件概述鼠標(biāo)事件和滾輪事件單擊類觸發(fā)順序： mousedown 、mouseup 、click 、mousedown 、mouseup 、click 、dbclick7事件描述click鼠標(biāo)單擊事件，當(dāng)單擊鼠標(biāo)（一般為左鍵）或按下回車鍵時，會觸發(fā)事件dbclick鼠標(biāo)雙擊事件，當(dāng)雙擊鼠標(biāo)時，會觸發(fā)事件mousedown當(dāng)任意按下鼠標(biāo)鍵時，會觸發(fā)事件mouseup當(dāng)釋放鼠標(biāo)銨鍵時，會觸發(fā)事件mouseover當(dāng)鼠標(biāo)移動進(jìn)到當(dāng)前元素的區(qū)域就會觸發(fā)事件mou

5、seout當(dāng)鼠標(biāo)移出當(dāng)前元素的區(qū)域就會觸發(fā)事件mousemove當(dāng)鼠標(biāo)在當(dāng)前元素區(qū)域內(nèi)不斷移動時，會重復(fù)觸發(fā)事件mousewheel當(dāng)用戶通過鼠標(biāo)滾輪在垂直方向上滾動頁面時（向上或向下），就會觸發(fā)事件JavaScript事件概述事件處理相關(guān)概念事件類型（event type）：前面一節(jié)已經(jīng)介紹，在此處不再贅述。事件目標(biāo)（event target）：是發(fā)生事件或與之相關(guān)的對象。window、document和element（元素）對象是最常見的事件目標(biāo)，當(dāng)然，AJAX中的XMLHttpRequest對象也是一個事件目標(biāo)。事件處理程序（event handler）：是處理或響應(yīng)事件的函數(shù)，它也叫事

6、件監(jiān)聽程序（event listener）。事件處理程序的名字以“on”開頭，如：click事件的事件處理程序就是onclick。事件對象（event object）：是與特定事件相關(guān)且包含有關(guān)該事件詳細(xì)信息的對象。8JavaScript事件概述事件處理常見的事件句柄9事件事件句柄說明changeonChange當(dāng)元素改變時執(zhí)行JS代碼submitonSubmit當(dāng)表單被提交時執(zhí)行JS代碼resetonReset當(dāng)表單被重置時執(zhí)行JS代碼selectonSelect當(dāng)元素被選取時執(zhí)行JS代碼bluronBlur當(dāng)元素失去焦點時執(zhí)行JS代碼focusonFocus當(dāng)元素獲得焦點時執(zhí)行JS代碼cl

7、ickonClick當(dāng)鼠標(biāo)被單擊時執(zhí)行JS代碼dblclickonDblclick當(dāng)鼠標(biāo)被雙擊時執(zhí)行JS代碼mousedownonMouseDown當(dāng)鼠標(biāo)按鈕被按下時執(zhí)行JS代碼mousemoveonMouseMove當(dāng)鼠標(biāo)指針移動時執(zhí)行JS代碼JavaScript事件概述事件處理常見的事件句柄(續(xù)）10事件事件句柄說明mouseoutonMouseOut當(dāng)鼠標(biāo)移出某元素時執(zhí)行JS代碼mouseuponMouseUp當(dāng)鼠標(biāo)按鈕被松開時執(zhí)行JS代碼keydownonKeyDown當(dāng)鍵盤被按下時執(zhí)行JS代碼keypressonKeyPress當(dāng)鍵盤被按下后又松開時執(zhí)行JS代碼keyuponKeyU

8、p當(dāng)鍵盤被松開時執(zhí)行JS代碼loadonLoad當(dāng)文檔載入時執(zhí)行JS代碼unloadonUnload當(dāng)文檔卸載時執(zhí)行JS代碼JavaScript事件概述事件處理注冊事件處理程序的方式有三種設(shè)置HTML標(biāo)簽屬性為事件處理程序設(shè)置JavaScript對象屬性為事件處理程序。使用addEventListener和attachEvent函數(shù)綁定11JavaScript事件概述事件處理設(shè)置HTML標(biāo)簽屬性為事件處理程序語法為： onXXX=JavaScript Code“XXX 為事件名稱。例如，鼠標(biāo)單擊事件 onclick ，鼠標(biāo)雙擊事件 ondouble，鼠標(biāo)移入事件 onmouseover，鼠標(biāo)移

9、出事件 onmouseout 等。JavaScript Code 為處理事件的JavaScript代碼，一般是函數(shù)。12div1div2div3JavaScript事件概述事件處理設(shè)置JavaScript對象屬性為事件處理程序。通過設(shè)置某一事件目標(biāo)的事件處理程序?qū)傩詠頌槠渥韵鄳?yīng)的事件處理程序。事件處理程序?qū)傩悦钟伞皁n”后面跟著事件名組成13JavaScript事件概述事件處理設(shè)置JavaScript對象屬性為事件處理程序。14 var div1 = document.getElementById(div1);/*獲取id為div1元素的對象，是事件目標(biāo)對象*/ var div2 = do

10、cument.getElementById(div2);/*獲取id為div2元素的對象，是事件目標(biāo)對象*/ var div3 = document.getElementById(div3);/*獲取id為div3元素的對象，是事件目標(biāo)對象*/div1.onclick = function()/*給div1對象的onclick屬性賦值，其值為事件處理函數(shù)*/alert(div1);div2.onclick = function()/*給div2對象的onclick屬性賦值，其值為事件處理函數(shù)*/alert(div2);div3.onclick = function()/*給div3對象的onc

11、lick屬性賦值，其值為事件處理函數(shù)*/alert(div3);JavaScript事件概述事件處理使用addEventListener和attachEvent函數(shù)綁定任何能成為事件目標(biāo)的對象都定義了一個名叫addEventListener()的方法，使用這個方法可以為事件目標(biāo)注冊事件處理程序。其中： bool參數(shù)可省略，默認(rèn)為flase，當(dāng)其為true時，就是在事件捕獲過程中注冊事件處理程序。15addEventListener(事件類型，事件處理函數(shù),bool)JavaScript事件概述事件處理使用addEventListener和attachEvent函數(shù)綁定16/*獲取id為div1

12、元素的對象，是事件目標(biāo)對象*/ var div1 = document.getElementById(div1); /*調(diào)用div1對象的addEventListener函數(shù) */div1.addEventListener(click, function() alert(div1-bubble); , false);div1.addEventListener(click, function() alert(div1-capturing); , true);JavaScript常用事件獲得焦點（focus）和失去焦點（blur）事件17 姓名： 年齡：JavaScript常用事件鼠標(biāo)移動和鼠標(biāo)按

13、下事件18姓名：年齡：JavaScript常用事件UI事件UI事件中的load事件通常用于檢測文檔內(nèi)容或者圖片是否加載完畢。事件目標(biāo)為window對象，通過給window對象的onload屬性進(jìn)行賦值，賦值為事件處理函數(shù)當(dāng)文檔加載完畢后，會觸發(fā)window對象的onload事件，執(zhí)行事件處理函數(shù)體里面代碼19window.onload = function()/事件處理JavaScript常用事件表單事件submit事件通常監(jiān)測是否提交表單元素，當(dāng)提交表單元素時會觸發(fā)，也就是form元素對象.onsumit事件。需要注意的是，動態(tài)表單提交（form.submit()）無法觸發(fā)onsubmit事件。submit事件常用來進(jìn)行表單數(shù)據(jù)驗證。20賬號：密碼：JavaScript常用事件表單事件change事件作用域的內(nèi)容被改變時觸發(fā)，該事件是在內(nèi)容改變時還必須使得當(dāng)前元素失去焦點(onblur)才可以激活。change 事件會被HTML的、和 元素觸發(fā)。21我是一名大學(xué)生字體：宋體黑體楷體本章總結(jié)JavaScript事件的概念和作用，包含事件、事件類型、事件目標(biāo)、事件對象