front-end-example/04-dom-events-async

DOM + 事件 + 异步

这部分只解决一个问题：你能不能让页面里的元素被 JavaScript 真正控制起来，并对用户操作和异步结果做出响应。

学完后你应该掌握

• 如何获取页面元素
• 如何修改文本、样式和类名
• 如何创建、插入和删除节点
• 如何监听点击、输入、提交等事件
• preventDefault() 和 stopPropagation() 的常见场景
• 事件委托的基本写法
• prepend()、classList.remove() 的基础使用
• setTimeout 的异步顺序
• Promise 的基础用法
• async / await 的基础写法
• 如何把 DOM、事件、异步组合成一个小页面

这一章在解决什么

前面三章分别解决了：

• 页面有什么结构
• 页面长什么样
• 代码逻辑怎么写

这一章开始，JavaScript 不再只是打印到控制台，而是要真正操作页面。

它回答的是：

• 我怎么拿到某个按钮或输入框
• 用户点击后页面怎么变
• 表单提交后怎么处理
• 数据晚一点回来时页面怎么更新

必须建立的 5 个核心意识

1. 先选中元素，再操作元素

DOM 操作第一步不是“改”，而是“找到”。

常见方式：

• getElementById
• querySelector
• querySelectorAll

2. 事件是页面和用户的连接点

页面本身不会“自动响应”。

是你通过事件监听告诉浏览器：

• 点了按钮要做什么
• 输入框变化后要做什么
• 提交表单要做什么

3. 改页面就是改 DOM

常见 DOM 改动包括：

• 改文字：textContent
• 改类名：classList
• 改样式：style
• 增删节点：appendChild、remove

4. 异步不是“慢一点执行”，而是“先不阻塞主流程”

比如：

• setTimeout
• Promise
• async / await

这些都意味着：当前代码先继续往下走，结果稍后回来再处理。

5. 一个完整交互通常是“事件 + DOM + 状态 + 异步”

例如点击“加载数据”按钮时：

1. 监听点击事件
2. 更新 loading 状态
3. 等待异步结果
4. 把结果渲染到页面

高频 API 速记

获取元素

• document.getElementById()
• document.querySelector()
• document.querySelectorAll()

修改元素

• textContent
• innerHTML
• style
• classList.add()
• classList.remove()
• classList.toggle()

节点操作

• document.createElement()
• appendChild()
• prepend()
• remove()

事件

• addEventListener()
• event.target
• preventDefault()
• stopPropagation()

异步

• setTimeout()
• Promise
• .then()
• async
• await

学习顺序

1. 获取元素
2. 修改文本、类名、样式
3. 创建和删除节点
4. 点击事件
5. 表单提交和 preventDefault
6. 冒泡、委托和 stopPropagation
7. setTimeout 和异步顺序
8. Promise 渲染
9. async / await
10. 综合小页面
11. input / change 事件
12. prepend、classList.remove 和链接默认行为

练习目录

• 01-query-selectors/README.md
• 02-text-class-style/README.md
• 03-create-and-remove/README.md
• 04-click-counter/README.md
• 05-form-submit-and-prevent-default/README.md
• 06-bubbling-and-delegation/README.md
• 07-timers-and-async-order/README.md
• 08-promise-and-render/README.md
• 09-async-await-panel/README.md
• 10-final-dashboard/README.md
• 11-input-live-preview/README.md
• 12-prepend-remove-and-link-default/README.md

过关标准

如果你能独立做到下面这些，就说明这一章已经基本过关：

• 能正确选中页面里的元素
• 能改文字、类名和内联样式
• 能动态创建和删除列表项
• 能给按钮、表单绑定事件
• 能理解事件冒泡和事件委托
• 能在需要时使用 preventDefault() 和 stopPropagation()
• 能处理 input / change 这类常见表单事件
• 能使用 prepend()、classList.remove() 完成简单 DOM 调整
• 能理解 setTimeout 的异步顺序
• 能用 Promise 和 async / await 处理一个简单异步流程
• 能做出一个有真实交互的小页面

学习建议

• 每个练习都用浏览器打开 starter.html
• 打开开发者工具，边看页面边看控制台
• 一个交互没反应时，先确认元素有没有选中
• 一个异步结果不对时，先打印中间状态