第8章 事件 教学设计

第3章面向对象（上）《JavaScript前端开发案例教程》教学设计课程名称：JavaScript前端开发案例教程授课年级：年级授课学期：学年第一学期教师姓名：某某老师年月日课题名称第8章事件计划学时4学时内容分析事件被看作是JavaScript与网页之间交互的桥梁，当事件发生时，可以通过JavaScript代码执行相关的操作。例如，用户可以通过鼠标拖拽登录框，改变登录框的显示位置；或者在阅读文章时，选中文本后自动弹出分享、复制选项。本章将对JavaScript中的事件进行详细讲解。教学目标及基本要求掌握事件的绑定方式熟悉事件对象的使用掌握常用事件的实现教学重点事件的绑定方式、事件对象、鼠标事件、键盘事件教学难点事件的绑定方式、页面事件、鼠标事件教学方式教学采用教师课堂讲授为主概念性知识点：提出为什么，将抽象具体化，配合教学PPT、图例辅助讲解。功能性知识点：提需求，并上机演示如何应用，重点内容总结运行原理。综合实战操作：分析整体的设计思路和步骤，对具体操作进行上机演练。教学过程第一学时（事件概述、事件的绑定方式、获取事件对象、常用属性和方法）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾前面学过的内容，引出本节课主题。在前面的课程中，许多案例的实现都离不开事件，例如鼠标单击onclick、下拉菜单发生改变onchange、鼠标滑过onmouseover等。利用事件可以实现各种交互效果。本节将围绕事件进行详细讲解。（3）明确学习方向。了解事件处理程序、事件驱动式、事件流的基本概念。掌握早期版本IE浏览器与标准浏览器在事件处理上的差别。掌握如何获取事件对象。掌握事件对象的常用属性和方法。掌握案例“缓动的小球”开发。二、知识讲解事件概述事件可以用来实现网页交互。事件处理程序指的就是JavaScript为响应用户行为所执行的程序代码。JavaScript可以用来开发事件驱动式的程序。当事件发生时，有一个事件流机制。有事件捕获和事件冒泡两种形式。事件的绑定方式行内绑定式：通过HTML标签的属性实现。动态绑定式：为DOM元素对象添加事件处理程序。关于行内绑定式和动态绑定式，在前面都已经用过。注意在事件处理程序中，this的指向问题。以上两种方式的局限：同一个DOM对象的同一个事件只能有一个事件处理程序。事件监听：可以为同一个DOM对象添加多个事件处理程序。对比早期版本的IE浏览器和标准浏览器的区别。获取事件对象事件对象类似于前面学过的错误对象。事件对象用来当事件发生时，获取与事件相关的信息。获取事件对象，注意早期版本IE与主流浏览器的区别。事件对象常用属性和方法列举事件对象的常用属性和方法。注意标准浏览器与早期版本IE浏览器的区别。通过代码演示这些功能的具体使用。演示如何获取触发事件的元素。演示如何阻止事件冒泡。演示如何阻止事件默认行为。三、【案例】缓动的小球案例分析本案例是一个动画特效，利用缓动算法，实现小球的缓动效果。当单击页面中的小球时，以动画效果移动小球的位置。代码实现编写HTML页面，在页面中准备一个小球。为小球添加单击事件，将动画效果的代码封装到animate()函数中。讲解缓动动画的公式，并进行代码演示。获取指定元素的当前样式。利用定时器计算每次移动的数值，将定时器的间隔设为15毫秒。判断当前是否已经完成移动，当完成移动时清除定时器。四、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第二学时（页面事件、焦点事件、鼠标事件、案例：鼠标拖拽特效）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。了解事件的分类。掌握页面加载事件的机制。掌握焦点事件的使用。掌握鼠标的事件的使用。掌握如何在鼠标事件发生时获取鼠标的位置。掌握案例“鼠标拖曳特效”的实现。二、知识讲解页面事件通过代码演示当把JavaScript代码写在被操作元素之前，会发生什么情况。分析问题出现的原因，引出若将代码写在前面，可以用页面加载事件来实现。通过代码演示利用加载事件来解决刚才的问题。焦点事件讲解什么是焦点事件，焦点事件的应用场景。列举获得焦点事件，与失去焦点事件。用过对用户登录表单进行表单验证的案例，演示焦点事件的使用。鼠标事件列举常见的鼠标事件。通过代码演示鼠标事件，注意理清事件的触发时机。通过代码演示如何在发生鼠标事件时，获取鼠标的位置信息。讲解获取位置信息时对早期版本浏览器的兼容处理代码。利用“以圆形显示鼠标单击位置”的案例，深化对鼠标事件的理解。三、【案例】鼠标拖曳特效案例分析演示案例完成后的效果。分析实现原理，根据鼠标的移动位置来计算盒子的移动位置。画出鼠标拖动位置示意图，总结出计算公式。代码实现编写HTML页面，准备一个带有拖曳条的盒子。为拖动条添加onmousedown事件，在事件中获取鼠标按下时的位置，并计算鼠标该位置与盒子的距离。为document添加onmousemove事件，当鼠标移动时对盒子进行移动。测试程序，对程序进行优化，避免选中上面的文本。为document添加onmouseup事件，实现当鼠标松开后，不再移动盒子。四、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第三学时（键盘事件、表单事件、动手实践：图片放大特效）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。掌握键盘事件的使用。掌握表单事件的使用。掌握“图片放大特效”案例的开发。二、知识讲解键盘事件列举常用的键盘事件，并通过代码进行演示。注意键盘事件的触发顺序。注意不同方法在事件对象中保存的按键值的区别。通过代码演示如何在控制台中显示当前按键的keyCode。补充讲解“键盘常用ASCII码”以及“键盘码”。通过案例演示键盘事件的应用。补充案例：实现文本框只能输入数字的功能。查阅键盘码，通过判断条件(keyCode>=48&&keyCode<=57)即可验证当前按键是否为数字。表单事件讲解表单事件的应用场景，可以在表单提交前进行表单验证。列举常用的表单事件。通过案例演示表单事件的使用，注意在事件中如何取消默认动作。三、【动手实践】图片放大特效案例分析演示案例完成后的效果。分析实现原理，准备两张相同的图片，一张是小图，一张是大图。代码实现控制遮罩和局部放大图的显示与隐藏。计算需要的位置信息，包括鼠标在页面中的位置、鼠标位置与盒子的距离、遮罩的位置、遮罩的显示位置等。测试程序，观察遮罩的移动效果。发现遮罩移出盒子的问题，对代码进行改进，限定遮罩的可移动范围。按照比例移动大图，思考大图的移动距离如何计算。大图可移动的总距离=大图的宽度-大盒子的宽度。遮罩可移动的总距离=小盒子的宽度-遮罩的宽度。移动比例=大图能够移动的总距离/遮罩能够移动的总距离。设置大图当前的位置=移动比例*遮