《JavaScript程序设计案例教程》教案 第8章 事件.docx

PAGE12

PAGE12

PAGE13

PAGE13

课题

事件

课时

4课时（180min）

教学目标

知识目标：

（1） 了解什么是事件

（2）掌握事件绑定方式

（3）理解事件捕获和冒泡

（4）掌握事件对象使用

（5）掌握多种事件类型

（6）掌握事件优化方式

能力目标：

（1）熟练运用事件绑定

（2）高效处理事件对象

（3）能够根据需求选用合适的事件类型处理

（4）能够优化事件提升网页性能与资源利用

素质目标：

（1）了解科技发展，树立刻苦钻研、科技创新的人生目标

（2）提高选择合适方法解决不同问题的能力

教学重难点

教学重点：掌握不同的事件绑定方式，包括内联绑定、动态绑定和事件监听，并能根据实际情况选择合适方式；学会获取和运用事件对象的属性及方法；熟悉各种事件类型，如鼠标、触摸、键盘等事件及其应用场景；掌握事件优化方法

教学难点：理解事件流中事件捕获、冒泡及DOM事件流模型的复杂机制；掌握不同浏览器环境下事件绑定和事件监听的差异及兼容方法；灵活运用事件对象的属性和方法实现复杂功能；运用事件优化策略有效提升网页性能

教学方法

问答法、讨论法、讲授法

教学用具

电脑、投影仪、多媒体课件、教材

教学过程

主要教学内容及步骤

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务

请同学们浏览一些带有交互功能的网页，如购物网站、新闻资讯网站等。观察网页中不同元素在用户操作下的反应，如点击按钮、鼠标悬停、输入文本等，尝试分析可能涉及的事件类型和事件处理方式，然后在APP上进行讨论。

【学生】完成课前任务

考勤

【教师】使用APP进行签到

【学生】班干部报请假人员及原因

问题导入

【教师】提出以下问题：

同学们在浏览网页的时候，有没有注意过当你点击一个按钮时，页面会出现特定的反应，比如弹出一个提示框。那大家有没有想过这背后是怎样的一种机制在起作用呢？是什么让网页能够响应我们的各种操作呢？

【学生】聆听、思考、举手回答

传授新知

【教师】通过学生的回答，引入新知，讲解事件的基本知识，以及事件对象、事件类型和事件优化的相关知识

8.1事件介绍

8.1.1什么是事件

事件可以理解成是JavaScript侦测到的行为，这些行为包括页面加载、鼠标单击某个按钮、鼠标滑过某区域等。当JavaScript侦测到这些行为，就会去执行一段程序来进行响应，这就实现了用户与网页的交互。JavaScript为响应用户行为所执行的程序代码称为事件处理程序。例如，当用户在网页中单击某个按钮时，这个行为就会被JavaScript中的click事件监测到，然后让其自动执行为click事件编写的程序代码（事件处理程序），如打开提示框。

……（详见教材）

?【教师】组织学生阅读“科技民生-万物互联”的内容（详见教材），并提出问题：

请同学们结合生活实际，分析哪些生活场景用到了物联网？

?【学生】阅读、思考、举手回答

?【教师】总结学生的回答

8.1.2事件绑定方式

?【教师】扫码播放“事件绑定方式”微课，帮助学生了解3种绑定方式：内联绑定、动态绑定和事件监听

事件绑定是指为某个元素对象的事件绑定事件处理程序。JavaScript提供了3种绑定方式，分别为内联绑定、动态绑定和事件监听，下面分别介绍。

1．内联绑定

内联绑定是在HTML标签元素上新增一个事件属性，具体语法如下：

标签事件=事件处理程序/标签

上述语法中，标签可以是任意HTML标签，如div标签、a标签等。事件由on和事件名称组成，如元素单击事件onclick、网页加载事件onload等。事件处理程序是JavaScript代码，如console.log(hello)。事件内联绑定的示例如下：

buttononclick=alert(hello);hello/button

上述代码中，button元素包含一个onclick属性，其对应执行的JavaScript代码为alert(hello);。当单击button元素时，将弹出提示框并显示hello。

【课堂问答】

?【教师】随机邀请学生回答以下问题

内联绑定为什么不提倡在实际开发中使用？

?【学生】聆听、思考、回答

?【教师】总结学生的回答

?提示

实际开发中提倡将JavaScript代码与HTML代码分离，因此不建议使用内联绑定。

2．动态绑定

动态绑定是在JavaScript代码中获取标签元素，通过标签元素的事件属性绑定事件处理程序，语法如下：

标签元素.事件=事件处理程序;

上述语法中，标签元素是通过document.getElementById()等方式获取的。实际开发中，相对于内联绑定来说，动态绑定使用更多一些。下面通过实例展示事件动态绑定。

【课堂练习