JavaScript程序設(shè)計(jì)：第5章 事件和事件處理_第1頁
JavaScript程序設(shè)計(jì)：第5章 事件和事件處理_第2頁
JavaScript程序設(shè)計(jì)：第5章 事件和事件處理_第3頁
JavaScript程序設(shè)計(jì)：第5章 事件和事件處理_第4頁
JavaScript程序設(shè)計(jì)：第5章 事件和事件處理_第5頁
已閱讀5頁，還剩12頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第5

章事件和事件處理5.1理解事件5.1.1事件概述日常生活中的事件：地震、火災(zāi)、臺(tái)風(fēng)使用電腦時(shí)發(fā)生的事件：鼠標(biāo)單擊鏈接、鼠標(biāo)右擊對(duì)象、單擊按鈕、按鈕失去焦點(diǎn)有事件，有反映，有程序25.1.2事件類型P86表5-1中，第一列(HTML組件)即為事件類型,每一類組件對(duì)應(yīng)若干個(gè)事件。每一類組件對(duì)應(yīng)一個(gè)HTML標(biāo)記。5.1.3事件處理器語法格式如下：<HTML標(biāo)簽事件處理器名稱="JavaScript代碼">表5-2中事件處理屬性35.2處理事件<HTML標(biāo)簽事件處理器名稱="JavaScript代碼">

<inputtype="button"value="click"onClick="alert('您單擊了按鈕!')">其中：inputtype="button"——事件類型為按鈕value="click"——按鈕的鍵面字onClick="alert(‘您單擊了按鈕!’)"——事件處理器4例5-1作為HTML屬性的事件處理器<html><head><title>Example:作為HTML屬性的事件處理器</title><scriptlanguage="JavaScript">functionpm(m){alert(m);}</script></head><body><h3>Example:作為HTML屬性的事件處理器</h3><inputtype="button"

value="直接輸出信息按鈕"onClick="alert('您單擊了按鈕，直接輸出了信息!')"><inputtype="button"value="通過函數(shù)輸出信息按鈕"onClick="pm('單擊按鈕，通過函數(shù)輸出信息!')"></body></html>5通過JavaScript屬性處理事件P91將事件處理器作為JavaScript的屬性，使程序像操作JavaScript屬性一樣來處理事件。

用HTML屬性指定的事件處理器為：<inputtype="button"name="infoButton"value="clickme"onClick="alert('按鈕的click事件被觸發(fā)！')">同樣的功能通過JavaScript屬性指定事件處理器來實(shí)現(xiàn)：document.forms[0].infoButton.onclick=

function(){alert('按鈕的click事件被觸發(fā)！');}使用JavaScript的屬性來表示事件處理器的好處：減少了HTML和JavaScript的混合使用，簡潔明了。事件處理器的代碼不必是確定的，可以根據(jù)需要?jiǎng)討B(tài)創(chuàng)建和修改。65.3JavaScript中的事件處理<html><head><title>Example:鏈接的mouseOver事件</title><scriptlanguage="JavaScript">functionpm(m){alert(m);}</script></head><body><h3>Example:鏈接的mouseOver事件</h3><Ahref=#onMouseOver="pm('您的鼠標(biāo)經(jīng)過鏈接了!')">

請(qǐng)把鼠標(biāo)放過來，看看會(huì)發(fā)生什么事情:)</A></body></html>5.3.1處理鏈接事件例5-2href=—鏈接的寫法見P13575.3.2處理窗口事件例5-3(P93)<html><head><title>Example:窗口的load和unload事件</title><scriptlanguage="JavaScript">functionlh(){alert("窗口執(zhí)行了load事件");}functionulh(){alert("窗口執(zhí)行了unload事件");}</script></head><bodyonload="lh()"onunload="ulh()"><h3>Example:本窗口的load和unload事件</h3></body></html>85.3.3處理圖形事件例5-4(P94)<html><head><title>Example:圖形的load事件</title><scriptlanguage="JavaScript">functionilh(){alert("圖形加載完成");}</script></head><body><h3>Example:圖形的load事件</h3><IMG

src="TT1.JPG"

onLoad="ilh()"></body></html>95.3.4處理圖形映射事件例5-5(P95)<title>Example:圖形映射事件</title><scriptlanguage="JavaScript">functionmh(){alert("您單擊的是圖形第二個(gè)映射區(qū)!");}</script></head><body><h3>Example:圖形映射事件</h3><IMGsrc="tt1.JPG"USEMAP="#abc"><MAPNAME="abc"><AREACOORDS="5,5,300,120"href="gg1.jpg"target=_blank><AREACOORDS="300,5,600,120"onClick="mh()"></MAP></body>圖像中的地圖名105.3.5處理窗體事件例5-6(P97)<title>Example:窗體事件</title><scriptlanguage="JavaScript">functioncv(s){var

len=s.length;

for(vari=0;i<len;i++){if(s.charAt(i)!=""){returnfalse;}}returntrue;}判斷字符s是否為空,空為true,非空為false見P278115.3.5處理窗體事件例5-6(P97)

functionokh(){if(cv(document.test.userName.value)){alert("用戶名稱不能為空!");}elseif(cv(document.test.passWord.value)){alert("用戶密碼不能為空!");}else{alert("您填寫正確!");}}functionch(){document.test.userName.value="";

document.test.passWord.value="";}</script>125.3.5處理窗體事件例5-6(P97)

</head><body><formname="test"><h3>Example:窗體事件</h3><fontsize="2">用戶名稱:</font><inputtype="text"name="userName"><br><br><fontsize="2">用戶密碼:</font><inputtype="text"name="passWord"><br><br><inputtype="button"name="ok"value="確定"onClick="okh()">        <inputtype="button"name="cancel"value="取消"onClick="ch()"></form></body>13字體大小<FONTSIZE=?></FONT>（從1到7）1最小，7最大<BR>換行145.3.6處理錯(cuò)誤事件錯(cuò)誤事件處理函數(shù)不需要自己編寫，而是由瀏覽器自動(dòng)執(zhí)行，

通過3個(gè)參數(shù)傳遞錯(cuò)誤信息。155.3.6處理錯(cuò)誤事件例5-7(P99)<title>Example:處理錯(cuò)誤事件</title><scriptlanguage="JavaScript">functioneh(em,url,line){varm="錯(cuò)誤信息："+em+"\n錯(cuò)誤文檔的URL:"+url+"\n

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論