教程示例工程【免费下载链接】learning-areaGitHub repo for the MDN Learning Area.项目地址https://gitcode.com/gh_mirrors/le/learning-area点击查看免费下载导读本指南围绕 MDN Learning Area 中「JavaScript 构建模块 · 事件Events」一章的配套练习展开对应仓库文件为 marking.md。该练习通过三个由浅入深的任务检验学习者对addEventListener()、键盘事件对象KeyboardEvent.key、事件冒泡bubbling与e.target的掌握程度。读完本文你将得到每道任务的完整参考代码、逐行原理说明、可交互的在线练习入口以及一套可复用的自评与调试方法可直接对照本仓库中的起始代码进行练习与自查。一、任务体系概览三种练习形态本仓库在 events 目录下为每个任务提供了两种文件形态文件用途eventsN.html如 events1.html可交互练习版页面内置textarea classplayable playable-js代码编辑区与 Reset 按钮输入代码实时执行eventsN-download.html如 events1-download.html可下载的独立 HTML 版本适合在浏览器中直接打开调试错误会输出到浏览器 JavaScript 控制台可交互版本的运行机制由同目录下的 playable.js 实现页面加载时调用fillCode()将编辑区中的代码通过eval()执行用户每次输入都会触发input事件重新执行若代码抛错错误信息会被捕获并渲染到结果面板section中帮助你定位问题。点击 Reset 按钮则恢复初始代码playable.js。页面的预览区与编辑区样式由 styles.css 统一定制。也就是说在页面上做练习时如果代码有误错误信息会直接显示在结果面板上使用-download.html版本时请打开浏览器开发者工具的 Console 查看报错。二、Task 1用addEventListener实现按钮状态切换2.1 题目要求为页面中的按钮创建一个简单的事件处理器点击一次切换按钮文字再点击一次切换回来。要求只修改 JavaScript不改动 HTML。起始 HTML 结构见 events1-download.htmlbutton classoffMachine is off/button起始脚本const btn document.querySelector(.off); // Add your code here2.2 参考实现const btn document.querySelector(button); btn.addEventListener(click, () { if (btn.className on) { btn.textContent Machine is off; btn.className off; } else { btn.textContent Machine is on; btn.className on; } });2.3 逐行原理document.querySelector(button)选中页面中唯一的按钮元素也可以沿用起始代码的document.querySelector(.off)两者等价btn.addEventListener(click, () { ... })为按钮挂载点击事件监听器。注意这里传入的是箭头函数形式的回调函数而不是调用结果因此函数体不会在注册时立即执行状态判断通过btn.className判断当前按钮处于on还是off状态。初始 class 为off因此首次点击进入else分支将文字改为Machine is on、class 改为on再次点击则走if分支恢复Machine is off/off。评分要点该任务的核心是理解「事件监听器是函数的注册」以及「利用已有 DOM 属性维护状态」参考实现中 class 切换同时服务于样式与状态判断这是常见且简洁的做法。三、Task 2用键盘事件与KeyboardEvent.key驱动 Canvas 圆形移动3.1 题目要求为给定的 canvas 构建事件处理器当按下 WASD 键时让圆形在画布内移动。圆形由预置函数drawCircle()绘制。起始代码见 events2-download.htmlcanvas width480 height320 tabindex0/canvasconst canvas document.querySelector(canvas); const ctx canvas.getContext(2d); function drawCircle(x, y, size) { ctx.fillStyle white; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.fillStyle black; ctx.arc(x, y, size, 0, 2 * Math.PI); ctx.fill(); } let x 50; let y 50; const size 30; drawCircle(x, y, size); // Add your code here3.2 参考实现window.addEventListener(keydown, (e) { switch (e.key) { case a: x - 2; break; case d: x 2; break; case w: y - 2; break; case s: y 2; break; } drawCircle(x, y, size); });3.3 逐行原理window.addEventListener(keydown, ...)键盘事件监听器挂在window上确保无论焦点在页面哪个位置都能捕获按键e.key事件对象KeyboardEvent的key属性返回按键的字符值——小写a、d、w、s。这是现代浏览器推荐的判断方式相较已废弃的keyCode更直观、跨平台一致switch分支a让 x 坐标减 2向左、d让 x 加 2向右、w让 y 减 2向上、s让 y 加 2向下每个分支后的break必不可少否则会发生 case 穿透fall-through导致一次按键同时执行多个位移位移后调用drawCircle(x, y, size)重绘。drawCircle内部先用白色fillRect清空整块画布再以黑色arc fill在新坐标绘制圆形形成「移动 重绘」的经典 Canvas 动画模式。评分要点该任务考察键盘事件与事件对象的使用以及状态变量x/y在事件回调间共享的能力。canvas上设置了tabindex0说明画布本身也可聚焦键盘事件处理因此对可访问性同样友好。四、Task 3借助事件冒泡与e.target实现按钮组统一监听4.1 题目要求在按钮组的父元素上设置点击监听器点击任意按钮时利用e.target读取被点击按钮的data-color属性并将.button-bar的背景色设为该颜色。要求不遍历所有按钮、不给每个按钮单独挂监听器以此考查对事件冒泡事件委托的理解。起始结构见 events3-download.htmldiv classbutton-bar button>const buttonBar document.querySelector(.button-bar); function setColor(e) { buttonBar.style.backgroundColor e.target.getAttribute(data-color); } buttonBar.addEventListener(click, setColor);4.3 逐行原理buttonBar.addEventListener(click, setColor)监听器只挂在父容器.button-bar上。由于点击事件会从目标元素**向上冒泡bubble**到祖先元素因此任意按钮的点击最终都会被父容器捕获无需为 4 个按钮逐一注册监听器e.target事件对象上的target属性指向真正被点击的元素即具体的某个button而不是监听器所在的父容器这是事件委托得以成立的关键e.target.getAttribute(data-color)通过getAttribute读取按钮上的自定义数据属性data-color的值red、yellow、green、purple再赋给buttonBar.style.backgroundColor完成背景色切换。评分要点这里尤其值得注意e.target与e.currentTarget的区别——前者是被点击的实际目标后者是挂载监听器的元素。若误用e.currentTarget即buttonBar将因父容器没有data-color属性而取到null背景色不会变化。这一陷阱正是该任务考察的核心知识点。五、评估与调试错误定位与自测清单根据 marking.md 的说明练习环境内置了错误反馈机制交互版eventsN.html代码出错时异常会被fillCode()捕获并渲染到结果面板section classpreview无需打开控制台即可看到错误信息下载版eventsN-download.html错误输出到浏览器 JavaScript 控制台请按 F12 打开开发者工具查看Reset 按钮任何时刻点击 Reset 即可将编辑区恢复为起始代码便于反复重做。自测清单可对照以下几点逐条验收Task 1初始文字为 Machine is off点击后变为 Machine is on再次点击恢复按钮 class 在on/off间往返切换Task 2按下a/d/w/s时圆形分别向左/右/上/下移动且每次按键画布先被清空再重绘无残影一次按键只触发一个方向移动验证break没有遗漏Task 3分别点击四个按钮背景色依次变为红、黄、绿、紫整个实现只有一处addEventListener验证未给每个按钮单独绑定。六、结语三个任务共同勾勒出 JavaScript 事件处理的完整能力图谱addEventListener的正确注册Task 1、事件对象e.key的读取与状态驱动Task 2、事件冒泡与e.target的事件委托Task 3。结合本仓库的 可交互练习页及 Task 2、Task 3边改边跑再对照 marking.md 的参考实现逐行比对即可完成一次闭环的自我评估。如需扩展练习还可以基于 events 目录下的起始文件尝试为 Task 2 增加边界判断防止圆形移出画布或为 Task 3 增加事件委托之外的更多自定义属性读取逻辑。赞分享教程示例工程【免费下载链接】learning-areaGitHub repo for the MDN Learning Area.项目地址https://gitcode.com/gh_mirrors/le/learning-area点击查看免费下载相关推荐如何正确初始化transcribe参数结构体transcribe_*_init函数使用规范如何正确初始化transcribe参数结构体transcribe_ _init函数使用规范 transcribe.cpp 是一个 C/C 语音转文本sp人工智能语音音频本地部署推理引擎Jetpack Compose 界面开发指南Wanandroid 项目 UI 实现详解Jetpack Compose 界面开发指南Wanandroid 项目 UI 实现详解 Jetpack Compose 是 Android 官方推出的现代化如何用115Exporter实现115网盘全速下载终极完整指南如何用115Exporter实现115网盘全速下载终极完整指南 你是否厌倦了115网盘官方客户端的限速烦恼想要彻底摆脱下载速度的束缚体验真正的满带宽下载体前端开发工具上一篇Presto 0.225 版本技术解析查询任务管控、GCS 认证、JDBC 大小写匹配与 SPI 演进下一篇Apache Pulsar C 客户端实战指南编译安装、消息生产消费与 TLS 认证创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考