网页设计与制作教程Web前端开发（第7版）课件：JavaScript事件处理-mouse事件_第1页
网页设计与制作教程Web前端开发（第7版）课件：JavaScript事件处理-mouse事件_第2页
网页设计与制作教程Web前端开发（第7版）课件：JavaScript事件处理-mouse事件_第3页
网页设计与制作教程Web前端开发（第7版）课件：JavaScript事件处理-mouse事件_第4页
网页设计与制作教程Web前端开发（第7版）课件：JavaScript事件处理-mouse事件_第5页
已阅读5页，还剩12页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

mouse（鼠标）事件主要是操作鼠标所触发的事件，如单击、双击、鼠标离开等。

JavaScript事件处理mouse事件目录

JavaScript事件处理10.1事件概述10.2window事件10.3mouse事件10.4keyboard事件10.5form事件10.6事件捕捉与事件冒泡习题1010.3mouse事件常用的鼠标事件见表。mouse事件的语法格式有下面三种：1）HTML中：<elementon事件名="myScript">2）JavaScript中：object.on事件名=function(){myScript};3）JavaScript中使用addEventListener()方法：object.addEventListener("事件名",myScript,false);10.3mouse事件9.3.1click事件【例10-11】本例演示如何在鼠标单击页面区域时显示鼠标在浏览器中的坐标位置，并在单击图片时弹出一个消息框。本例文件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无效*/</style><scripttype="text/javascript">functionmyFunction(e){x=e.clientX;//获取浏览器显示区域单击的坐标位置，x坐标

y=e.clientY;//y坐标

document.getElementById("p1").innerHTML="坐标位置:x:"+x+",y:"+y;}</script></head><bodyonclick="myFunction(event)"><p>单击页面触发函数。</p><pid="p1">坐标位置:</p><imgsrc="images/js.jpg"onClick="window.alert('单击图像');"></body></html>10.3mouse事件9.3.2dblclick事件【例10-12】本例演示如何在鼠标双击段落文字时触发事件函数，并在段落下方显示“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()">双击本文字触发一个函数，在本段文字下面显示HelloWorld</p><pid="p1"></p></body></html>10.3mouse事件9.3.3mouseover和mouseout事件1.mouseover事件<ahref="/"onMouseOver="window.status='你好';returntrue">请单击</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】本例鼠标指针停留在图片上时图片放大，鼠标指针离开图片时图片恢复原始大小。本例文件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>函数bigImg()在鼠标指针移动到笑脸图片时触发</p><p>函数normalImg()在鼠标指针移出笑脸图片时触发</p></body></html>10.3mouse事件9.3.4mousedown、mousemove和mouseup事件1.mousedown事件2.mousemove事件3.mouseup事件4.mousedown、mouseup、click事件执行的顺序10.3mouse事件【例10-14】鼠标指针指向段落文字，按下鼠标键文字变为红色，松开鼠标键文字变为绿色。本例文件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')">

单击文本改变颜色。触发一个带参数函数，当鼠标按钮被按下，当释放鼠标按钮，再一次触发其他参数函数。

</p></body></html>10.3mouse事件5.鼠标拖拽【例10-15】拖拽效果基于鼠标事件mousedown、mousemove、mouseup，分别为鼠标按下、鼠标移动、鼠标松开。10.3mouse事件<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>鼠标拖拽</title><styletype="text/css">html,body{width:100%;height:100%;}/*必须使用此CSS，否则body上的事件无效*//*被拖动的元素*/#ElementOfDragging{width:100px;height:100px;background:#00ff00;position:absolute;}</style><scripttype="text/javascript">vardrag;//要拖动的div元素的引用

varflag=false;//移动标志状态

functionondown(){//鼠标按下事件处理函数

drag=document.getElementById("ElementOfDragging");flag=true;}functiononmove(e){//鼠标移动事件处理函数

if(flag){//-50是为了把鼠标指针放在div(100x100)的中心

drag.style.left=e.clientX-50+"px";drag.style.top=e.clientY-50+"px";}}functiononup(){//鼠标松开事件处理函数

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

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论