《网页设计与制作(HTML+CSS+JavaScript)》课件-CORE-11_第1页
《网页设计与制作(HTML+CSS+JavaScript)》课件-CORE-11_第2页
《网页设计与制作(HTML+CSS+JavaScript)》课件-CORE-11_第3页
《网页设计与制作(HTML+CSS+JavaScript)》课件-CORE-11_第4页
《网页设计与制作(HTML+CSS+JavaScript)》课件-CORE-11_第5页
已阅读5页,还剩13页未读 继续免费阅读

下载本文档

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

文档简介

第十一章事件处理目标理解事件的概念。能够指定、编写事件的处理程序。掌握窗口事件、鼠标事件、表单事件的相关应用。概述、专业术语事件是用户所做的,或系统自动生成的动作。通过创建响应这种动作的处理程序,可以使得网页更具交互性。当今流行的应用程序,不论是Windows应用程序还是Web应用程序,都是基于事件驱动的原理。指定事件处理程序JavaScript脚本处理事件主要通过显式声明的方式实现,即我们所说的定义的方式,此外还可以通过匿名函数、手动触发等方式来指定事件的处理程序。下面我们将详细讲解显式声明方式,请看下面的示例。<html><head><title>显式声明</title> <scriptlanguage="javascript">functionshowWindows(){for(vari=0;i<5;i++){window.open("virus.html","","");}}</script></head><body><form><inputtype="button"onClick="showWindows()"value="单击打开窗口"></form></body></html>指定事件处理程序在浏览器中打开这个网页,其效果如右图11-1所示:单击按钮,触发onClick事件,出现我们熟悉的病毒效果,然而真正的病毒是要让IE不断的弹出新窗口,也就是让我们的“showWindows”函数的循环条件永远为真,但这里我们限于教材的需要只让它弹出5个新窗口,如右图11-2所示:事件详情

窗口事件窗口事件是当用户操作浏览器窗口时触发的事件。最常用的窗口事件有onLoad事件(载入事件)、onUnload(关闭事件)、onFocus事件(焦点事件)、onBlur事件(失去焦点事件)、onResize(调整窗口大小事件)等事件详情当用户进入页面且页面元素都加载完成后就触发了onLoad事件。页面的显示效果如右图11-3所示:单击“确定”后,再点击第二个文本框,此时第二个文本框获得了焦点触发onFocus事件,效果如右图11-4所示:事件详情单击“确定”后,再点击页面上除了第二个文本框以外的任意部分使得第二个文本框失去焦点,此时就触发了第二个文本框的失去焦点事件即onBlur事件。效果如右图11-5所示:单击“确定”后,接下来我们关闭此窗口事件的页面,这时就会触发窗口事件页面的onUnload事件,显示效果如右图11-6所示:事件详情鼠标事件主要的鼠标事件包括:onClick事件onDblClick事件onMouseOver事件onMouseOut事件onMouseDown事件onMouseUp事件onMouseMove事件事件详情下面两个例子让大家认识一下鼠标事件。<html><head><title>显示鼠标坐标</title></head><bodyonMouseMove="microsoftMouseMove()"><center><tableborder="1"><tr><tdalign=center><fontcolor="#FF0000"size="6">下面为脚本显示区</font></td></tr><tr><tdalign=centerheight=80><scriptlanguage="javascript">functionmicrosoftMouseMove(){document.test.x.value=window.event.x;document.test.y.value=window.event.y;}</script><formname="test">X:<inputname="x"type="text"size="4">Y:<inputtype="text"name="y"size="4"></form></td></tr></table></center></body></html>事件详情在浏览器中打开这个网页,效果如下图11-7所示:在代码中使用了鼠标的onMouseMove事件,以便在页面的对应文本框中显示鼠标的坐标,在网页中以浏览器的可视区域的左上角为坐标原点。其中“window.event.x”用来获取鼠标的x轴坐标,“window.event.y”用来获取y轴坐标。通过鼠标事件我们也可以实现图片的切换、文字的变化等等网页特效。下面我们将通过图片的连环效果,运用鼠标的相关事件。展示我们熟悉的“跑步”动作。同时,通过不同的鼠标事件,实现加速、减速和停止等操作。事件详情在浏览器中打开该网页,效果如下图11-8事件详情表单事件onSubmit事件onReset事件onChange事件onSelect事件事件详情代码示例见课本11-5效果如下事件详情键盘事件onKeyDown事件

温馨提示

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

评论

0/150

提交评论