网页设计与制作教程Web前端开发（第7版）课件：JavaScript事件处理-mouse事件.pptx

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

目录JavaScript事件处理10.1事件概述10.2window事件10.3mouse事件10.4keyboard事件10.5form事件10.6事件捕捉与事件冒泡习题10

10.3mouse事件常用的鼠标事件见表。

mouse事件的语法格式有下面三种：1）HTML中：elementon事件名=myScript2）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事件

!DOCTYPEhtmlhtmlheadmetacharset=utf-8titleclick事件/titlestyletype=text/csshtml,body{width:100%;height:100%;}/*必须使用此CSS，否则onclick无效*//stylescripttype=text/javascriptfunctionmyFunction(e){x=e.clientX;//获取浏览器显示区域单击的坐标位置，x坐标y=e.clientY;//y坐标document.getElementById(p1).innerHTML=坐标位置:x:+x+,y:+y;}/script/headbodyonclick=myFunction(event)p单击页面触发函数。/ppid=p1坐标位置:/pimgsrc=images/js.jpgonClick=window.alert(单击图像);/body/html10.3mouse事件

9.3.2dblclick事件【例10-12】本例演示如何在鼠标双击段落文字时触发事件函数，并在段落下方显示“HelloWorld”。本例文件10-12.html在浏览器中显示如图10-9所示。10.3mouse事件

!DOCTYPEhtmlhtmlheadmetacharset=utf-8titledblclick事件/titlescripttype=text/javascriptfunctionmyFunction(){document.getElementById(p1).innerHTML=HelloWorld;}/script/headbodypondblclick=myFunction()双击本文字触发一个函数，在本段文字下面显示HelloWorld/ppid=p1/p/body/html10.3mouse事件

9.3.3mouseover和mouseout事件1.mouseover事件ahref=/onMouseOver=window.status=你好;returntrue请单击/aahrefonmouseover=alert(弹出信息！)显示的链接文字/aimgsrc=image1.jpgonMouseOver=alert(在图像之上);brahref=#onMouseOver=window.alert(在链接之上);imgsrc=image2.jpg/ahr10.3mouse事件

2.mouseout事件【例10-13】本例鼠标指针停留在图片上时图片放大，鼠标指针离开图片时图片恢复原始大小。本例文件10-13.html在浏览器中显示如图10-10所示。10.3mouse事件

!DOCTYPEhtmlhtm