網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開(kāi)發(fā)（第7版）課件：JavaScript事件處理-事件概述_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開(kāi)發(fā)（第7版）課件：JavaScript事件處理-事件概述_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開(kāi)發(fā)（第7版）課件：JavaScript事件處理-事件概述_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開(kāi)發(fā)（第7版）課件：JavaScript事件處理-事件概述_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開(kāi)發(fā)（第7版）課件：JavaScript事件處理-事件概述_第5頁(yè)
已閱讀5頁(yè)，還剩25頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

本節(jié)介紹事件的概念、類(lèi)型、事件處理程序的綁定方式。

JavaScript事件處理

事件概述目錄

JavaScript事件處理10.1事件概述10.2window事件10.3mouse事件10.4keyboard事件10.5form事件10.6事件捕捉與事件冒泡習(xí)題1010.1事件概述10.1.1事件的概念1.事件（Event）JavaScript事件是指在瀏覽器窗體或者HTML元素上發(fā)生的瀏覽器或者用戶(hù)行為。頁(yè)面上的每個(gè)元素都可以產(chǎn)生某些事件。行為是某個(gè)事件和由該事件觸發(fā)的動(dòng)作的組合。動(dòng)作是預(yù)先編寫(xiě)的JavaScript函數(shù)，事件一般與元素綁定在JavaScript中，事件是預(yù)先定義好的、能夠被對(duì)象識(shí)別的動(dòng)作。事件定義了用戶(hù)與網(wǎng)頁(yè)交互時(shí)產(chǎn)生的各種操作。10.1事件概述2.事件類(lèi)型事件類(lèi)型用來(lái)說(shuō)明發(fā)生什么類(lèi)型事件的字符串，即事件名。HTML事件可以是瀏覽器行為，也可以是用戶(hù)行為。常用的事件類(lèi)型包括窗口事件（load、unload等）、鼠標(biāo)事件（click、dblclick、mousedown等）、鍵盤(pán)事件（keydown、keyup、keypress等）、文本事件（textInput等）等。10.1事件概述3.事件目標(biāo)（操作對(duì)象）事件目標(biāo)就是發(fā)生事件的對(duì)象，也稱(chēng)事件目標(biāo)對(duì)象。例如單擊“確定”按鈕，則該“確定”按鈕就是事件目標(biāo)。當(dāng)談?wù)撌录r(shí)，會(huì)同時(shí)指明類(lèi)型和目標(biāo)。10.1事件概述4.事件處理函數(shù)事件處理函數(shù)（又稱(chēng)事件句柄、事件監(jiān)聽(tīng)函數(shù)、事件監(jiān)聽(tīng)器）是指用于響應(yīng)某個(gè)特定事件被觸發(fā)時(shí)而調(diào)用執(zhí)行的函數(shù)。每一個(gè)事件均對(duì)應(yīng)一個(gè)事件處理函數(shù)，在程序執(zhí)行時(shí)，將相應(yīng)的函數(shù)或語(yǔ)句指定給該事件處理函數(shù)，則在該事件發(fā)生時(shí)，瀏覽器便執(zhí)行指定的函數(shù)或語(yǔ)句。一個(gè)對(duì)象可以響應(yīng)一個(gè)或多個(gè)事件，因此可以使用一個(gè)和多個(gè)事件過(guò)程對(duì)用戶(hù)或系統(tǒng)的事件做出響應(yīng)。10.1事件概述5.事件對(duì)象當(dāng)觸發(fā)某個(gè)事件時(shí)，會(huì)產(chǎn)生一個(gè)事件對(duì)象，這個(gè)對(duì)象包含著所有與事件有關(guān)的信息。事件對(duì)象，一般稱(chēng)為event對(duì)象。event對(duì)象中包含著所有事件相關(guān)的屬性和方法，這些屬性和方法均為只讀的，見(jiàn)表1、表2。10.1事件概述10.1事件概述10.1事件概述事件對(duì)象提供了兩組屬性來(lái)區(qū)別瀏覽器坐標(biāo)的屬性，一組是頁(yè)面可視區(qū)坐標(biāo)，另一組是屏幕坐標(biāo)，見(jiàn)表3。10.1事件概述其示意圖如圖10-1所示。10.1事件概述6.事件周期（事件流）事件周期（也稱(chēng)事件流）是描述從頁(yè)面中接收事件的順序。事件周期分為3個(gè)階段，如圖所示。1）事件捕獲（eventcapturing）階段。2）目標(biāo)觸發(fā)（targettrigger）階段。3）事件冒泡（eventbubbling）階段。10.1事件概述9.1.2事件的類(lèi)型常見(jiàn)的事件類(lèi)型分為HTML事件和DOM事件。1.HTML事件HTML具有使事件在瀏覽器中觸發(fā)動(dòng)作的能力，發(fā)生在瀏覽器窗口上的事件，稱(chēng)為HTML事件。（1）window（窗口）事件（2）mouse（鼠標(biāo)）事件（3）keyboard（鍵盤(pán)）事件（4）form（表單）事件（5）media（媒體）事件10.1事件概述2.DOM事件DOM事件分為DOM0級(jí)事件和DOM2級(jí)事件（沒(méi)有DOM1）。（1）DOM0級(jí)事件DOM0級(jí)事件處理把JavaScript代碼或一個(gè)函數(shù)賦值給一個(gè)事件處理屬性，例如：<inputid="myButton"type="button"value="PressMe"onclick="alert('Hello');">varbtn1=document.getElementById("myButton").onclick=function(){alert('Hello');}后面如果再次設(shè)置函數(shù)，會(huì)覆蓋之前的函數(shù)。（2）DOM2級(jí)事件DOM2級(jí)事件處理使用addEventListener()方法綁定事件程序。同DOM0級(jí)事件處理相比，它不會(huì)覆蓋之前的事件。10.1事件概述9.1.3事件處理程序的綁定方式JvaScript事件處理程序有3種綁定方式。1.HTML事件處理程序方式語(yǔ)法格式如下：<標(biāo)簽名事件名="JavaScript腳本"…>…</標(biāo)簽名>或<標(biāo)簽名事件名="事件處理函數(shù)名()"…>…</標(biāo)簽名>【例10-1】下面代碼即為HTML事件處理程序，單擊按鈕后，會(huì)彈出消息框。本例文件10-1.html。10.1事件概述<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>HTML事件處理程序</title><scripttype="text/javascript">functionmyFunction(){alert("HTML事件處理程序2");};</script></head><body><buttononclick="alert('HTML事件處理程序1')">點(diǎn)我</button><inputtype="button"onclick="myFunction()"value="單擊按鈕"></body></html>10.1事件概述2.通用屬性綁定方式語(yǔ)法格式如下：<標(biāo)簽名id="ID名"…>…</標(biāo)簽名>var元素的對(duì)象名=document.getElementById("ID名");//獲取被綁定事件的元素上面格式中：第一行<標(biāo)簽名id=“ID名”…>…</標(biāo)簽名>放在<body>中。第二行var放在<scripttype="text/javascript">…</script>中，用“ID名”在綁定監(jiān)聽(tīng)事件之前先獲取被綁定事件的元素。10.1事件概述（1）賦值方式格式如下：元素的對(duì)象名.事件名

=function(){};//綁定匿名函數(shù)【例10-2】把函數(shù)賦值給按鈕的單擊事件btnObj.onclick=function(){}。本例文件10-2.html。10.1事件概述<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>通用屬性綁定</title></head><body><inputtype="button"name="btn"id="btn"value="單擊按鈕"/><scripttype="text/javascript">varbtnObj=document.getElementById("btn");//給誰(shuí)綁定事件，就要先獲取誰(shuí)

btnObj.onclick=function(){alert("通用屬性綁定1");};</script></body></html>10.1事件概述（2）調(diào)用方式格式如下：元素的對(duì)象名.事件名

=事件處理函數(shù)名;【例10-3】采用btn.onclick=myfun調(diào)用方式。本例文件名為10-3.html。10.1事件概述<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>通用屬性綁定</title></head><body><inputtype="button"name="btn"id="btn"value="單擊按鈕"/><scripttype="text/javascript">varbtnObj=document.getElementById(“btn");//給誰(shuí)綁定事件，就要先獲取誰(shuí)

btnObj.onclick=myfun;//myfun后面不要加()括號(hào)，否則會(huì)變?yōu)榱⒓磮?zhí)行函數(shù)

functionmyfun(){alert("通用屬性綁定2");};</script></body></html>10.1事件概述（3）刪除事件如果要?jiǎng)h除屬性綁定的事件，為該對(duì)象的事件賦值空值。例如：btnObj.onclick=null;10.1事件概述3.DOM監(jiān)聽(tīng)事件綁定方式與通用屬性綁定方式相同，在綁定監(jiān)聽(tīng)事件之前先獲取被綁定事件的元素，語(yǔ)法格式如下：<標(biāo)簽名id="ID名"…>…</標(biāo)簽名>var元素的對(duì)象名=document.getElementById("ID名");//獲取被綁定事件的元素10.1事件概述（1）內(nèi)嵌方式內(nèi)嵌方式的語(yǔ)法格式如下：元素的對(duì)象名.addEventListener("事件名",function(){JavaScript腳本;},false);【例10-4】使用內(nèi)嵌方式綁定監(jiān)聽(tīng)事件。本例文件名為10-4.html。10.1事件概述<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>監(jiān)聽(tīng)事件</title></head><body><buttonid="btn">單擊按鈕</button><scripttype="text/javascript">varbtnObj=document.getElementById("btn");//給誰(shuí)綁定事件，就要先獲取誰(shuí)

btnObj.addEventListener("click",function(){alert("監(jiān)聽(tīng)事件1");},false);

btnObj.addEventListener("click",function(){alert("監(jiān)聽(tīng)事件2");},false);</script></body></html>10.1事件概述（2）調(diào)用方式調(diào)用方式的語(yǔ)法格式如下：元素的對(duì)象名.addEventListener("事件名",函數(shù)名,false);

10.1事件概述【例10-5】使用調(diào)用方式綁定監(jiān)聽(tīng)事件。本例文件名為10-5.html。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>監(jiān)聽(tīng)事件</title></head><body><buttonid="btn">單擊按鈕</button><scripttype="text/javascript">window.addEventListener("load",myfun,false);//綁定window對(duì)象的load事件

varbtnObj=document.getElementById("btn");//給誰(shuí)綁定事件，就要先獲取誰(shuí)

btnObj.addEventListener("click",myfun1,false);//綁定多個(gè)事件處理程序，第1個(gè)

btnObj.addEventListener("click

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論