JavaScript网页特效案例教程课件作者王莹第五章节课件第五章节.pptVIP

JavaScript网页特效案例教程 主编：王莹 副主编：印梅 齐燕 尚辅网 / 第五章 常用事件 8课时 课时建议 案例教学 自主学习 探究训练 教学方法 键盘鼠标事件 页面事件 表单事件 编辑事件 本章重点 点击按钮改变网页背景颜色 点击改变鼠标颜色 验证电子邮件格式 鼠标移动动态改变图片的焦点 鼠标跟踪 上下键盘控制游泳的鱼 关注图像时图才变大 漂浮广告 聚焦文本框的变色反应 防止拷贝和黏贴 技能目标 什么是事件 事件处理程序的调用 鼠标键盘事件 页面事件 表单事件 滚动字幕事件 编辑事件 知识目标 5.1 什么是事件与事件处理程序的调用 1）通过HTML标记使用事件。该方法是直接在HTML标记中指定事件处理程序， 例如在body和input标记中指定。 语法 标记 … … 事件=事件处理程序 [事件=事件处理程序 ...] body onLoad=alert(欢迎进入本网页) onunLoad=alert(谢谢浏览) 2）通过JavaScript代码使用事件。 语法 事件主角 - 对象.事件 = 事件处理程序; /script Button.onclick=pp; } alert(欢迎使用JavaScript教程); { function pp() script language=javascript input type=button name=Button value=确定 5.2 键盘鼠标事件 1 任务描述 本案例涉及的知识点： 获取鼠标事件 event对象 2 相关知识 知识点1:键盘鼠标事件列表 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyDown 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyPress 当鼠标离开某对象范围时触发的事件 onMouseOut 当鼠标移动到某对象范围的上方时触发的事件 onMouseOver 鼠标按下后，松开时激发的事件 onMouseUp 鼠标上的按钮被按下了 onMouseDown 鼠标双击事件 onDblClick 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 onClick 描述 事件 知识点2：单击事件应用 单击事件（onclick）是在鼠标单击时被触发的事件。 单击是指鼠标停留在对象上，按下鼠标键，在没有移动鼠标的同时 放开鼠标键的这一完整过程。 知识点3：Event对象 event代表事件的状态，例如触发event对象的元素、 鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。 3 操作步骤 4 操作练习 5.3 页面相关事件 任务分析 2. 相关知识 实现图片的大小改变。图片打开时图片显示为小图，当鼠标没有关注此 图片时为小图，鼠标进入图片区域变为大图。 知识点1：页面相关事件列表 当前页面将被改变时触发的事件 onUnload 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断 onStop 浏览器的滚动条位置发生变化时触发的事件 onScroll 当浏览器的窗口大小被改变时触发的事件 onResize 浏览器的窗口被移动时触发的事件 onMove 在页面或图像加载完成后立即发生。 onLoad 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误 onError 当前页面的内容将要被改变时触发的事件 onBeforeUnload 图片在下载时被用户中断 onAbort 描述 事件 3 操作步骤 4 操作练习 5.4 表单事件 涉及到的知识点： 表单事件列表 如何进行表单验证 2 相关知识 一个表单被递交时触发的事件 onSubmit 当表单中RESET的属性被激发时触发的事件 onReset 当某个元素获得焦点时触发的事件 onFocus 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可] onChange 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可] onBlur 描述 事件 知识点2：表单验证 知识点1：表单事件列表 /FORM FORM action=success.html name=myform onSubmit=return checkForm() 3 操作步骤 FORM action=success.html method=post name=myform onSubmit=return checkForm() } return false; else return true; if