計(jì)算機(jī)應(yīng)用技術(shù)-事件 教學(xué)課件

第8章事件事件事件對象事件綁定事件分類學(xué)習(xí)目標(biāo)掌握熟悉掌握掌握事件的綁定方式12熟悉事件對象的使用 掌握常用事件的實(shí)現(xiàn)3目錄事件對象8.28.1事件處理事件分類8.3?點(diǎn)擊查看本小節(jié)知識架構(gòu)?點(diǎn)擊查看本小節(jié)知識架構(gòu)?點(diǎn)擊查看本小節(jié)知識架構(gòu)知識架構(gòu)8.1事件處理1事件概述2事件的綁定方式知識架構(gòu)8.2事件對象1獲取事件對象2常用屬性和方法3【案例】緩動的小球知識架構(gòu)8.3事件分類1頁面事件2焦點(diǎn)事件3鼠標(biāo)事件4【案例】鼠標(biāo)拖拽特效5鍵盤事件6表單事件8.1事件處理在學(xué)習(xí)事件時(shí)，有幾個重要的概念需要了解：事件概述事件事件處理程序事件驅(qū)動式事件流8.1事件處理事件：可被理解為是JavaScript偵測到的行為。舉例：這些行為指的就是頁面的加載、鼠標(biāo)單擊頁面、鼠標(biāo)滑過某個區(qū)域等。事件概述8.1事件處理事件處理程序：指的就是JavaScript為響應(yīng)用戶行為所執(zhí)行的程序代碼。舉例：用戶單擊button按鈕，這個行為就會被JavaScript中的click事件偵測到；然后讓其自動執(zhí)行，為click事件編寫的程序代碼，如在控制臺輸出“按鈕被單擊”。事件概述8.1事件處理事件驅(qū)動式：是指在Web頁面中JavaScript的事件，偵測到的用戶行為，并執(zhí)行相應(yīng)的事件處理程序的過程。舉例：鼠標(biāo)移入文本區(qū)域，文本區(qū)域變色這一過程。事件概述8.1事件處理事件流：事件發(fā)生時(shí)，會在發(fā)生事件的元素節(jié)點(diǎn)與DOM樹根節(jié)點(diǎn)之間按照特定的順序進(jìn)行傳播，這個事件傳播的過程就是事件流。事件流的傳播順序解決方案：網(wǎng)景（Netscape）提出了“事件捕獲方式”、微軟（Microsoft）提出了“事件冒泡方式”。事件概述8.1事件處理事件概述事件捕獲方式（網(wǎng)景）事件流傳播的順序應(yīng)該是從DOM樹的根節(jié)點(diǎn)到發(fā)生事件的元素節(jié)點(diǎn)。8.1事件處理事件概述事件冒泡方式（微軟）事件流傳播的順序應(yīng)該是從發(fā)生事件的元素節(jié)點(diǎn)到DOM樹的根節(jié)點(diǎn)。8.1事件處理事件概述W3C的解決方案

規(guī)定事件發(fā)生后，先實(shí)現(xiàn)事件捕獲，但不會對事件進(jìn)行處理。接著進(jìn)行到目標(biāo)階段，執(zhí)行當(dāng)前元素對象的事件處理程序，但它會被看成是冒泡階段的一部分。最后實(shí)現(xiàn)事件的冒泡，逐級對事件進(jìn)行處理。8.1事件處理概念：事件綁定指的是為某個元素對象的事件綁定事件處理程序。事件的綁定方式行內(nèi)綁定式動態(tài)綁定式事件監(jiān)聽式8.1事件處理事件的綁定方式——行內(nèi)綁定式事件的行內(nèi)綁定式是通過HTML標(biāo)簽的屬性設(shè)置實(shí)現(xiàn)的。<標(biāo)簽名事件="事件的處理程序">標(biāo)簽名可以是任意的HTML標(biāo)簽，如<div>標(biāo)簽、<button>標(biāo)簽等；事件是由on和事件名稱組成的一個HTML屬性，如單擊事件對應(yīng)的屬性名為onclick；事件的處理程序指的是JavaScript代碼，如匿名函數(shù)等。8.1事件處理事件的綁定方式——行內(nèi)綁定式注意由于開發(fā)中提倡JavaScript代碼與HTML代碼相分離。因此，不建議使用行內(nèi)式綁定事件。8.1事件處理事件的綁定方式——動態(tài)綁定式解決的問題：JavaScript代碼與HTML代碼混合編寫的問題。實(shí)現(xiàn)方式：在JavaScript代碼中，為需要事件處理的DOM元素對象，添加事件與事件處理程序。DOM元素對象.事件=事件的處理程序;事件的處理程序一般都是匿名函數(shù)或有名的函數(shù)。8.1事件處理事件的綁定方式——動態(tài)綁定式行內(nèi)綁定式與動態(tài)綁定式的異同不同點(diǎn)：實(shí)現(xiàn)語法不同，前者通過HTML標(biāo)簽的屬性設(shè)置，后者在JS中處理DOM對象。事件處理程序中關(guān)鍵字this的指向也不同。前者指向window對象，后者指向當(dāng)前正在操作的DOM元素對象。相同點(diǎn)：同一個DOM對象的同一個事件只能有一個事件處理程序。8.1事件處理事件的綁定方式——事件監(jiān)聽式解決的問題：同一個DOM對象的同一個事件只能有一個事件處理程序，即可給同一個DOM對象的同一個事件添加多個事件處理程序。實(shí)現(xiàn)的方式：具有兼容性問題，一類是早期版本的IE瀏覽器（如IE6~8），一類遵循W3C標(biāo)準(zhǔn)的瀏覽器（以下簡稱標(biāo)準(zhǔn)瀏覽器）。8.1事件處理事件的綁定方式——事件監(jiān)聽式參數(shù)type指的是為DOM對象綁定的事件類型，它是由on與事件名稱組成的，如onclick。參數(shù)callback表示事件的處理程序。DOM對象.attachEvent(type,callback);早期版本的IE瀏覽器8.1事件處理事件的綁定方式——事件監(jiān)聽式參數(shù)type指的是DOM對象綁定的事件類型，它是由事件名稱設(shè)置的，如click。參數(shù)callback表示事件的處理程序。參數(shù)capture默認(rèn)值為false，表示在冒泡階段完成事件處理，將其設(shè)置為true時(shí)，表示在捕獲階段完成事件處理。DOM對象.addEventListener(type,callback,[capture]);標(biāo)準(zhǔn)瀏覽器8.1事件處理事件的綁定方式——事件監(jiān)聽式事件監(jiān)聽式的兩種不同實(shí)現(xiàn)方式的區(qū)別實(shí)現(xiàn)的語法不同。事件處理程序的觸發(fā)順序也不相同，同一個對象的相同事件，早期版本IE瀏覽器的事件處理程序按照添加的順序倒序執(zhí)行。而標(biāo)準(zhǔn)瀏覽器的事件處理程序按照添加順序正序執(zhí)行。8.1事件處理事件的綁定方式——事件監(jiān)聽式值得一提事件監(jiān)聽的處理程序是一個有名的函數(shù)時(shí)，可移出事件監(jiān)聽。DOM對象.detachEvent(type,callback); //早期版本IE瀏覽器DOM對象.removeEventListener(type,callback);//標(biāo)準(zhǔn)瀏覽器參數(shù)type值的設(shè)置要與添加事件監(jiān)聽的事件類型相同，參數(shù)callback表示事件處理程序的名稱，即函數(shù)名。8.2事件對象事件對象的來源：當(dāng)發(fā)生事件時(shí)，都會產(chǎn)生一個事件對象event。事件對象的作用：這個對象中包含著所有與事件相關(guān)的信息，包括發(fā)生事件的DOM元素、事件的類型以及其他與特定事件相關(guān)的信息。舉例：因鼠標(biāo)移動發(fā)生事件時(shí)，事件對象中就會包括鼠標(biāo)位置（橫縱坐標(biāo)）等相關(guān)的信息；獲取事件對象8.2事件對象獲取事件對象的方式早期IE瀏覽器（IE6~8）：window.event標(biāo)準(zhǔn)瀏覽器：會將一個event對象直接傳入到事件處理程序中。獲取事件對象8.2事件對象獲取事件對象varevent=e||window.event;IE8瀏覽器Chrome瀏覽器8.2事件對象在事件發(fā)生后，事件對象event中不僅包含著與特定事件相關(guān)的信息，還會包含一些所有事件都有的屬性和方法。常用屬性和方法8.2事件對象常用屬性和方法分類屬性/方法描述公有的type返回當(dāng)前事件的類型，如click標(biāo)準(zhǔn)瀏覽器事件對象target返回觸發(fā)此事件的元素（事件的目標(biāo)節(jié)點(diǎn)）currentTarget返回其事件監(jiān)聽器觸發(fā)該事件的元素bubbles表示事件是否是冒泡事件類型cancelable表示事件是否取消默認(rèn)動作eventPhase返回事件傳播的當(dāng)前階段。1表示捕獲階段，2表示處于目標(biāo)階段，3表示冒泡階段stopPropagation()阻止事件冒泡preventDefault()阻止默認(rèn)行為早期版本IE瀏覽器事件對象srcElement返回觸發(fā)此事件的元素（事件的目標(biāo)節(jié)點(diǎn)）cancelBubble阻止事件冒泡，默認(rèn)為false表示允許，設(shè)置true表示阻止returnValue阻止默認(rèn)行為，默認(rèn)為true表示允許，設(shè)置false表示阻止8.2事件對象常用屬性和方法var

btn=document.getElementById('btn');btn.onclick

=function(e){

var

obj=event.target||window.event.srcElement;

console.log(obj.nodeName);

console.log(obj.id);

console.log(obj.className);

console.log(obj.innerText);};獲取觸發(fā)事件的元素8.2事件對象常用屬性和方法red.onclick

=function(){console.log('red');};green.onclick

=function(){console.log('green');};yellow.onclick

=function(){console.log('yellow');};事件冒泡8.2事件對象常用屬性和方法if(window.event){ //早期IE瀏覽器

window.event.cancelBubble=true;}else{ //標(biāo)準(zhǔn)瀏覽器

e.stopPropagation();}阻止事件冒泡8.2事件對象常用屬性和方法HTML中有些元素標(biāo)簽擁有一些特殊的行為。例如，單擊<a>標(biāo)簽后，會自動跳轉(zhuǎn)到href屬性指定的URL鏈接；單擊表單的submit按鈕后，會自動將表單數(shù)據(jù)提交到指定的服務(wù)器端頁面處理。因此，我們把標(biāo)簽具有的這種行為稱為默認(rèn)行為。8.2事件對象常用屬性和方法<aid="test"href="">默認(rèn)鏈接</a><script>

document.getElementById('test').onclick=function(e){if(window.event){ //早期版本IE瀏覽器

window.event.returnValue=false;}else{ //標(biāo)準(zhǔn)瀏覽器

e.preventDefault();}};</script>禁止默認(rèn)行為8.2事件對象動畫特效：是JavaScript的常見功能之一。緩動的實(shí)現(xiàn)原理：通過定時(shí)器連續(xù)的修改當(dāng)前DOM元素的某個樣式值，達(dá)到一個動態(tài)的特效。【案例】緩動的小球8.2事件對象緩動動畫公式：

【案例】緩動的小球step=(target-leader)/10leader=leader+step計(jì)算每次緩動的步長計(jì)算下次的起始點(diǎn)target表示目標(biāo)點(diǎn)。leader表示起始點(diǎn)。step表示從起始點(diǎn)到目標(biāo)點(diǎn)每次緩動的步長。而緩動特效在實(shí)現(xiàn)時(shí)，隨著距離target越來越近，step步長值逐漸變小，從而達(dá)到非常逼真的緩動效果。8.2事件對象【案例】緩動的小球代碼實(shí)現(xiàn)思路：利用<div>設(shè)計(jì)小球，并用CSS設(shè)置小球的定位。為小球綁定單擊事件，在處理函數(shù)中調(diào)用自定義的animate()實(shí)現(xiàn)小球的緩動。編寫animate()動畫函數(shù)，在函數(shù)中利用定時(shí)器，根據(jù)緩動公式完成緩動動畫。8.3事件分類思考：HTML頁面是按照什么樣的順序進(jìn)行加載的？答案：頁面的加載是按照代碼的編寫順序，從上到下依次執(zhí)行的。會出現(xiàn)的問題：若在頁面還未加載完成的情況下，就使用JavaScript操作DOM元素，會出現(xiàn)語法錯誤。頁面事件8.3事件分類頁面事件<script>

document.getElementById('demo').onclick=function(){console.log('單擊');

};</script><divid="demo"></div>頁面加載順序的問題8.3事件分類頁面事件解決辦法：頁面事件可以改變JavaScript代碼的執(zhí)行時(shí)機(jī)。load事件：用于body內(nèi)所有標(biāo)簽都加載完成后才觸發(fā)，又因其無需考慮頁面加載順序的問題，常常在開發(fā)具體功能時(shí)添加。unload事件：用于頁面關(guān)閉時(shí)觸發(fā)，經(jīng)常用于清除引用避免內(nèi)存泄漏時(shí)使用。window.onload=function(){//JavaScript代碼};8.3事件分類在Web開發(fā)中，焦點(diǎn)事件多用于表單驗(yàn)證功能，是最常用的事件之一。例如，文本框獲取焦點(diǎn)改變文本框的樣式，文本框失去焦點(diǎn)時(shí)驗(yàn)證文本框內(nèi)輸入的數(shù)據(jù)等。焦點(diǎn)事件8.3事件分類焦點(diǎn)事件事件名稱事件觸發(fā)時(shí)機(jī)focus當(dāng)獲得焦點(diǎn)時(shí)觸發(fā)（不會冒泡）blur當(dāng)失去焦點(diǎn)時(shí)觸發(fā)（不會冒泡）為了讓大家更好的掌握焦點(diǎn)事件的使用方法，下面以驗(yàn)證用戶名和密碼是否為空進(jìn)行演示。具體如例8-1所示。8.3事件分類鼠標(biāo)事件是Web開發(fā)中最常用的一類事件。例如，鼠標(biāo)滑過時(shí)，切換Tab欄顯示的內(nèi)容；利用鼠標(biāo)拖拽曳狀態(tài)框，調(diào)整它的顯示位置等，這些常見的網(wǎng)頁效果都會用到鼠標(biāo)事件。鼠標(biāo)事件8.3事件分類鼠標(biāo)事件事件名稱事件觸發(fā)時(shí)機(jī)click當(dāng)按下并釋放任意鼠標(biāo)按鍵時(shí)觸發(fā)dblclick當(dāng)鼠標(biāo)雙擊時(shí)觸發(fā)mouseover當(dāng)鼠標(biāo)進(jìn)入時(shí)觸發(fā)mouseout當(dāng)鼠標(biāo)離開時(shí)觸發(fā)change當(dāng)內(nèi)容發(fā)生改變時(shí)觸發(fā)，一般多用于<select>對象mousedown當(dāng)按下任意鼠標(biāo)按鍵時(shí)觸發(fā)mouseup當(dāng)釋放任意鼠標(biāo)按鍵時(shí)觸發(fā)mousemove在元素內(nèi)當(dāng)鼠標(biāo)移動時(shí)持續(xù)觸發(fā)8.3事件分類鼠標(biāo)事件位置屬性（只讀）描述clientX鼠標(biāo)指針位于瀏覽器頁面當(dāng)前窗口可視區(qū)的水平坐標(biāo)（X軸坐標(biāo)）clientY鼠標(biāo)指針位于瀏覽器頁面當(dāng)前窗口可視區(qū)的垂直坐標(biāo)（Y軸坐標(biāo)）pageX鼠標(biāo)指針位于文檔的水平坐標(biāo)（X軸坐標(biāo)），IE6~8不兼容pageY鼠標(biāo)指針位于文檔的垂直坐標(biāo)（Y軸坐標(biāo)），IE6~8不兼容screenX鼠標(biāo)指針位于屏幕的水平坐標(biāo)（X軸坐標(biāo)）screenY鼠標(biāo)指針位于屏幕的垂直坐標(biāo)（Y軸坐標(biāo)）在項(xiàng)目開發(fā)中還經(jīng)常涉及一些常用的鼠標(biāo)屬性，用來獲取當(dāng)前鼠標(biāo)的位置信息。8.3事件分類鼠標(biāo)事件IE6~8瀏覽器中不兼容pageX和pageY屬性。因此，項(xiàng)目開發(fā)時(shí)需要對IE6~8瀏覽器進(jìn)行兼容處理。var

pageX=event.pageX||event.clientX+document.documentElement.scrollLeft;var

pageY=event.pageY||event.clientY+document.documentElement.scrollTop;鼠標(biāo)在文檔中的坐標(biāo)等于鼠標(biāo)在當(dāng)前窗口中的坐標(biāo)加上滾動條卷去的文本長度。為了讓大家更好的理解鼠標(biāo)事件的使用，以圓形顯示鼠標(biāo)單擊位置為例演示。具體如例8-2所示。8.3事件分類【案例】鼠標(biāo)拖曳特效盒子的位置（left和top值）=鼠標(biāo)的位置（left和top值）-鼠標(biāo)按下時(shí)與盒子之間的距離（left和top值）。鼠標(biāo)拖動原理8.3事件分類代碼實(shí)現(xiàn)思路：①編寫HTML，設(shè)計(jì)彈框用于實(shí)現(xiàn)拖拽特效。②為拖拽條添加mousedown事件及其處理程序。③處理鼠標(biāo)移動事件，實(shí)現(xiàn)鼠標(biāo)的拖拽的特效。④處理釋放鼠標(biāo)按鍵的事件，實(shí)現(xiàn)鼠標(biāo)按鈕松開后，彈框不再移動?！景咐渴髽?biāo)拖曳特效8.3事件分類鍵盤事件是指用戶在使用鍵盤時(shí)觸發(fā)的事件。例如，用戶按Esc鍵關(guān)閉打開的狀態(tài)欄，按Enter鍵直接完成光標(biāo)的上下切換等。鍵盤事件事件名稱事件觸發(fā)時(shí)機(jī)keypress鍵盤按鍵（