《web前端技术》(赵敏)003-0教案 第25课 常见事件类型

PAGE1PAGE1PAGE2PAGE2

课题第24课常见事件类型课时2课时（90min）教学目标知识技能目标：掌握常见的事件类型，包括鼠标事件、键盘事件、焦点事件和页面事件素质目标：（1）学习常见的事件类型，增强探索意识，培养钻研精神（2）参与实战演练，加强专业技能，提升实践能力教学重难点教学重点：事件与事件流、事件对象教学难点：事件绑定方式教学方法问答法、讨论法、讲授法、实践练习法、演示法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂教学设计第1节课：→→→传授新知（15min）→实战拓展（25min）第2节课：→传授新知（15min）→实战拓展（20min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，把和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务了解常见的事件类型【学生】完成课前任务通过课前任务，让学生提前了解了解事件，为课堂上学习相关知识点做准备考勤（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（3min）【教师】提出问题常见的事件类型有哪些？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识事件分为多种类型，不同的用户操作行为会触发不同类型的事件，常见的事件类型有鼠标事件、键盘事件、焦点事件、页面事件等。通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（15min）12.4常见事件类型【教师】讲解事件12.4.1鼠标事件在PC端设备中，鼠标事件是最常用的一类事件。例如，用户单击轮播图的切换按钮播放下一张图片；用户鼠标滑过某个菜单时，隐藏的菜单内容显示出来等。这些效果都是通过监听鼠标事件实现的。【教师】展示表“常用的鼠标事件及其触发场景”并讲解内容…（详见教材）【课堂拓展】所展示的部分事件之间是存在关联的。例如，触发了mousedown和mouseup事件之后才会触发click事件，连续两次触发click事件才会触发dblclick事件。…（详见教材）【例12-7】触发不同的鼠标事件…（详见教材）12.4.2键盘事件当用户使用键盘进行操作时会触发相应的键盘事件，利用键盘事件可以实现一些常见的功能，如监听Enter按键进行表单的提交，监听Esc按键关闭展开的菜单等。表12-3列出了常用的键盘事件及其触发场景。【教师】展示表“常用的键盘事件及其触发场景”并讲解内容【课堂拓展】在键盘事件触发时，该事件对象中会包含一个键盘按键的键码（属性值为keyCode），其中keypress事件对应字符键的键码与ASCⅡ码中对应字母或数字的编码相同，如字母A的键码为65。【例12-8】大多数网站都有登录功能，该功能既可以使用鼠标事件实现，也可以使用键盘事件实现，本例我们通过按下Enter键实现网站登录功能（以下提供部分代码）。输入账号和密码，…（详见教材）【学生】聆听、记录、理解、观看效果通过教师的讲解和演示例子，使学生了解鼠标事件和键盘事件实战拓展（25min）实现小球跟随鼠标移动动画效果【教师】先展示最终效果，并讲解做题思路，然后要求学生编写程序，有疑问可互相讨论，或询问老师小球移动都有自己的坐标，小球移动的同时，需要进行坐标传递，将第一个坐标依次传递给最后一个坐标，来实现小球跟着移动的效果。【教师】教师对学生完成的项目进行评价，并补充讲解通过实战拓展，锻炼学生的编程能力第二节课问题导入（5min）【教师】提出问题焦点事件和页面事件是什么？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（15min）【教师】讲解焦点事件和页面事件，演示例子辅助理解12.4.3焦点事件焦点事件是在页面某个元素获得焦点或者失去焦点时触发的事件。例如，单击页面上某个输入框，那么该输入框便获得了焦点并触发焦点事件；当单击输入框外部时，该输入框便失去焦点并触发焦点事件。【教师】展示表“常用的焦点事件及其触发场景”并讲解内容【例12-9】焦点事件最常见的使用场景就是进行表单规则校验。本例我们使用焦点事件实现手机号码格式校验（以下提供部分代码），分别输入不完整和完整的手机号码，并在输入框外单击，…（详见教材）12.4.4页面事件页面事件主要是指浏览器页面级别的事件，如页面滚动触发的事件、页面加载完成触发的事件等。利用页面事件可以完成一些常见功能。例如，监听浏览器scroll事件，当进度条滚动到某个位置时显示对应内容；监听<img>的load事件，获取加载图片的宽高等。【教师】展示表“常见的页面事件及其触发场景”并讲解内容load事件是日常开发中最常用的事件之一，该事件是在页面所有元素（包括DOM元素、css文件、js文件、图片等外部资源）加载完成后才触发的事件。监听页面load事件通常使用window.onload，一般情况下，在想要获取页面中某一元素的时候会用到。【例12-10】页面事件的应用…（详见教材）【课堂拓展】在默认情况下，浏览器是从上到下解析一个HTML文档的。在例12-10中，浏览器从上到下解析HTML文档时，解析到window.onload时，浏览器不会先执行window.onload中的代码，而是继续往下解析，直到把整个HTML文档解析完之后才会回去执行window.onload中的代码。【学生】聆听、记录、理解、观看效果通过教师的讲解和演示，让学生掌握焦点事件和页面事件实战拓展（20min）根据例12-9制作一下页面的效果，实现全选、反选、不选等效果。【教师】先展示最终效果，并讲解做题思路，然后要求学生编写程序，有疑问可互相讨论，或询问老师【教师】教师对学生完成的项目进行评价，并补充讲解通过实战拓展，锻炼学生的编程能力课堂小结（3min）【教师】简要总结本节课的要点本节课主要介绍了常见事件类型的相关知识。通过本节课的学习，学生应重点掌握以下内容。事件分为多种类型，不同的用户操作行为会触发不同类型的事件，常见的事件类型有鼠标事件、键盘事件、焦点事件、页面事件等。【学生】总结回顾知识点总结知识点，使学生牢固掌握常见事件类型作业布置（2min）【教师】布置课后作业实际网站开发过程中，很有可能遇到这样的情况：客户要求将一串长数字分位显示，例如将“13630016”显示为“13,630,016”。在本练习中通过编写一个自定义函数，将输入的数字字符格式化为分位显示的字符串。效果如下图所示。【学生】完成课后任务通过课后作业复习巩固