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

下載本文檔

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

文檔簡(jiǎn)介

mouse（鼠標(biāo)）事件主要是操作鼠標(biāo)所觸發(fā)的事件，如單擊、雙擊、鼠標(biāo)離開等。

JavaScript事件處理mouse事件目錄

JavaScript事件處理10.1事件概述10.2window事件10.3mouse事件10.4keyboard事件10.5form事件10.6事件捕捉與事件冒泡習(xí)題1010.3mouse事件常用的鼠標(biāo)事件見表。mouse事件的語(yǔ)法格式有下面三種：1）HTML中：<elementon事件名="myScript">2）JavaScript中：object.on事件名=function(){myScript};3）JavaScript中使用addEventListener()方法：object.addEventListener("事件名",myScript,false);10.3mouse事件9.3.1click事件【例10-11】本例演示如何在鼠標(biāo)單擊頁(yè)面區(qū)域時(shí)顯示鼠標(biāo)在瀏覽器中的坐標(biāo)位置，并在單擊圖片時(shí)彈出一個(gè)消息框。本例文件10-11.html在瀏覽器中顯示如圖10-8所示。10.3mouse事件<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>click事件</title><styletype="text/css">html,body{width:100%;height:100%;}/*必須使用此CSS，否則onclick無(wú)效*/</style><scripttype="text/javascript">functionmyFunction(e){x=e.clientX;//獲取瀏覽器顯示區(qū)域單擊的坐標(biāo)位置，x坐標(biāo)

y=e.clientY;//y坐標(biāo)

document.getElementById("p1").innerHTML="坐標(biāo)位置:x:"+x+",y:"+y;}</script></head><bodyonclick="myFunction(event)"><p>單擊頁(yè)面觸發(fā)函數(shù)。</p><pid="p1">坐標(biāo)位置:</p><imgsrc="images/js.jpg"onClick="window.alert('單擊圖像');"></body></html>10.3mouse事件9.3.2dblclick事件【例10-12】本例演示如何在鼠標(biāo)雙擊段落文字時(shí)觸發(fā)事件函數(shù)，并在段落下方顯示“HelloWorld”。本例文件10-12.html在瀏覽器中顯示如圖10-9所示。10.3mouse事件<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>dblclick事件</title><scripttype="text/javascript">functionmyFunction(){document.getElementById("p1").innerHTML="HelloWorld";}</script></head><body><pondblclick="myFunction()">雙擊本文字觸發(fā)一個(gè)函數(shù)，在本段文字下面顯示HelloWorld</p><pid="p1"></p></body></html>10.3mouse事件9.3.3mouseover和mouseout事件1.mouseover事件<ahref="/"onMouseOver="window.status='你好';returntrue">請(qǐng)單擊</a><ahrefonmouseover="alert('彈出信息！')">顯示的鏈接文字</a><imgsrc="image1.jpg"onMouseOver="alert('在圖像之上');"><br><ahref="#"onMouseOver="window.alert('在鏈接之上');"><imgsrc="image2.jpg"></a><hr>10.3mouse事件2.mouseout事件【例10-13】本例鼠標(biāo)指針停留在圖片上時(shí)圖片放大，鼠標(biāo)指針離開圖片時(shí)圖片恢復(fù)原始大小。本例文件10-13.html在瀏覽器中顯示如圖10-10所示。10.3mouse事件<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>懸停和離開事件</title><scripttype="text/javascript">functionbigImg(x){x.style.height="64px";x.style.width="64px";}functionnormalImg(x){x.style.height="32px";x.style.width="32px";}</script></head><body><imgonmouseover="bigImg(this)"onmouseout="normalImg(this)"border="0"src="images/smilingface.gif"alt="Smiley"width="32"height="32"><p>函數(shù)bigImg()在鼠標(biāo)指針移動(dòng)到笑臉圖片時(shí)觸發(fā)</p><p>函數(shù)normalImg()在鼠標(biāo)指針移出笑臉圖片時(shí)觸發(fā)</p></body></html>10.3mouse事件9.3.4mousedown、mousemove和mouseup事件1.mousedown事件2.mousemove事件3.mouseup事件4.mousedown、mouseup、click事件執(zhí)行的順序10.3mouse事件【例10-14】鼠標(biāo)指針指向段落文字，按下鼠標(biāo)鍵文字變?yōu)榧t色，松開鼠標(biāo)鍵文字變?yōu)榫G色。本例文件10-14.html在瀏覽器中顯示如圖10-11所示。10.3mouse事件<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scripttype="text/javascript">functionmyFunction(elmnt,clr){elmnt.style.color=clr;}</script></head><body><ponmousedown="myFunction(this,'red')"onmouseup="myFunction(this,'green')">

單擊文本改變顏色。觸發(fā)一個(gè)帶參數(shù)函數(shù)，當(dāng)鼠標(biāo)按鈕被按下，當(dāng)釋放鼠標(biāo)按鈕，再一次觸發(fā)其他參數(shù)函數(shù)。

</p></body></html>10.3mouse事件5.鼠標(biāo)拖拽【例10-15】拖拽效果基于鼠標(biāo)事件mousedown、mousemove、mouseup，分別為鼠標(biāo)按下、鼠標(biāo)移動(dòng)、鼠標(biāo)松開。10.3mouse事件<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>鼠標(biāo)拖拽</title><styletype="text/css">html,body{width:100%;height:100%;}/*必須使用此CSS，否則body上的事件無(wú)效*//*被拖動(dòng)的元素*/#ElementOfDragging{width:100px;height:100px;background:#00ff00;position:absolute;}</style><scripttype="text/javascript">vardrag;//要拖動(dòng)的div元素的引用

varflag=false;//移動(dòng)標(biāo)志狀態(tài)

functionondown(){//鼠標(biāo)按下事件處理函數(shù)

drag=document.getElementById("ElementOfDragging");flag=true;}functiononmove(e){//鼠標(biāo)移動(dòng)事件處理函數(shù)

if(flag){//-50是為了把鼠標(biāo)指針?lè)旁赿iv(100x100)的中心

drag.style.left=e.clientX-50+"px";drag.style.top=e.clientY-50+"px";}}functiononup(){//鼠標(biāo)松開事件處理函數(shù)

flag=false;}</script></head><body><

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 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ì)用戶上傳內(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)論