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

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

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

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

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

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

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

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

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

9、出事件 onmouseout 等。JavaScript Code 為處理事件的JavaScript代碼，一般是函數(shù)。12div1div2div3JavaScript事件概述事件處理設置JavaScript對象屬性為事件處理程序。通過設置某一事件目標的事件處理程序屬性來為其注冊相應的事件處理程序。事件處理程序屬性名字由“on”后面跟著事件名組成13JavaScript事件概述事件處理設置JavaScript對象屬性為事件處理程序。14 var div1 = document.getElementById(div1);/*獲取id為div1元素的對象，是事件目標對象*/ var div2 = do

10、cument.getElementById(div2);/*獲取id為div2元素的對象，是事件目標對象*/ var div3 = document.getElementById(div3);/*獲取id為div3元素的對象，是事件目標對象*/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ù)綁定任何能成為事件目標的對象都定義了一個名叫addEventListener()的方法，使用這個方法可以為事件目標注冊事件處理程序。其中： bool參數(shù)可省略，默認為flase，當其為true時，就是在事件捕獲過程中注冊事件處理程序。15addEventListener(事件類型，事件處理函數(shù),bool)JavaScript事件概述事件處理使用addEventListener和attachEvent函數(shù)綁定16/*獲取id為div1

12、元素的對象，是事件目標對象*/ 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常用事件鼠標移動和鼠標按

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