《JavaScript前端开发程序设计项目式教程》教学设计22.项目8 事件驱动编程与基础事件处理

课程教学设计课程名称本课名称所授章节项目8滑块验证码——事件和事件处理授课对象选用教材《JavaScript前端开发程序设计项目式教程》课时数2【学情分析】知识基础学生已掌握JavaScript基础语法、DOM操作和BOM对象。知道JS可以响应用户操作，但对“事件”这一核心概念缺乏系统性认识，不清楚事件是如何被触发、捕获和处理的。能力基础能够使用行内onclick等简单方式绑定事件，但代码耦合度高，无法处理复杂的交互逻辑，如滑块拖拽。素养基础对实现滑块验证码等动态交互效果有浓厚兴趣，但因缺乏事件处理的系统知识而感到无从下手，需要建立清晰的事件处理模型。【教学目标】知识目标1.理解事件、事件处理、事件驱动编程的基本概念。

2.了解JavaScript中常用的事件类型（鼠标、键盘、表单、页面）。

3.掌握DOM0级事件处理的两种方式：行内绑定和动态绑定，并理解其优缺点。能力目标1.能够为页面元素绑定简单的点击、鼠标移入/移出等事件。

2.能够使用动态绑定的方式分离HTML结构与JS行为。素养目标1.建立“事件驱动”的编程思维模式。

2.培养良好的代码分离和可维护性意识。【教学分析】内容分析本课是事件学习的启蒙课。重点在于破除学生对事件的陌生感，通过“天干地支”等简单例子，建立起事件处理的基本模型。核心是理解“当X发生时，做Y”这一事件驱动思想。重点事件的基本概念；DOM0级动态绑定事件的方法。难点理解事件驱动编程与传统顺序执行程序的区别；理解行内绑定的弊端。【教学策略和方法】教学策略采用“情境导入-概念解析-对比实践-归纳总结”的策略。以张华同学想做滑块验证码的故事为切入点，引出事件的重要性。通过对比“行内绑定”和“动态绑定”两种写法，让学生直观感受代码分离的优势。教学方法情境教学法、对比教学法、任务驱动法。【课程思政】本课课程思政元素用户中心、安全意识、工程规范。切入方法与举措1.用户中心：通过介绍滑块验证码等交互形式，强调现代Web开发的核心是以用户为中心，提供流畅、安全的交互体验。

2.安全意识：在情境导入中提及验证码的作用是“提高个人信息的安全性，防止用户名和密码被恶意破解”，自然融入网络安全教育。

3.工程规范：通过对比行内绑定（不推荐）和动态绑定（有限推荐），向学生灌输编写结构清晰、易于维护的代码是专业开发者的基本素养。【教学实施过程】步骤环节（用时）具体内容活动设计意图教师学生1情境导入

(5分钟)回顾张华注册网站时看到滑块验证码的故事（教材情境导入）。提问：这个滑块是如何响应鼠标拖拽的？引出“事件”是实现所有动态交互的基石。讲述故事，提出核心问题：“网页是如何‘感知’用户操作的？”思考滑块验证码的实现原理，对“事件”产生好奇。以真实应用场景激发兴趣，明确学习目标。2新知讲授：事件基础

(20分钟)1.什么是事件：

-用户动作（点击、按键）或状态变化（加载、调整大小）。

-

事件是JS与网页交互的“桥梁”。

2.事件驱动编程：

-程序执行由事件触发，而非自上而下顺序执行。

3.常用事件分类：

-鼠标事件(click,

mouseover)

-键盘事件(keydown)

-表单事件(submit,

focus)

-页面事件(load,

resize)使用PPT展示事件分类表（教材表8-1），并用生活中的例子（如门铃）类比事件驱动。听讲、记录笔记，理解事件的核心概念和分类。建立对事件的宏观、系统性认识。3技能实践：DOM0级事件处理

(30分钟)任务1：天干地支——行内绑定

(任务实践8-1)

-在按钮上直接写onclick="..."。

任务2：天干地支——动态处理

(任务实践8-2)

-使用element.onclick=function(){...}。

引导讨论：

-对比两种方式的代码可读性、可维护性和复用性。巡视指导，确保学生完成两个任务，并组织小组讨论两种方式的优劣。动手完成两个任务，亲身体验两种绑定方式，并参与讨论。在实践中理解不同事件处理方式的特点，树立代码规范意识。4课堂小结

(5分钟)总结事件是动态页面的核心。DOM0级动态绑定是基础，但存在只能绑定一个处理函数的局限。预告下节课将学习更强大的DOM2级事件处理（addEventListener）。强调事件驱动思想的重要性，并指出当前方法的不足，为下一课做铺垫。跟随老师回顾，梳理知识脉络，期待学习更高级的事件处理方式。强化记忆，承上启下。【教学反思】特色创新成功地将抽象的“事件”概念，通过