第17课：按钮点击
进度 0/30
🎯
按钮点击
点击一下，网页马上回应你
📖知识引入
👂事件监听
JS会竖起耳朵听你的一举一动：点击是click事件、移动是mousemove、敲键盘是keydown。每个动作，都是一个「事件」。
🎬交互三部曲
所有交互都是同一套路：①找到元素（getElementById）→②竖起耳朵（addEventListener）→③写好剧本（点击后做什么）。三部曲一响，交互登场！
📝改网页内容
点击之后能换文字、换图片、变颜色——用JS给元素「变脸」。网页从「看的作品」变成「玩的玩具」。
🔔alert弹窗
alert("你好")是最简单的反馈方式，像网页开口说话。适合调试，但别在正式网站里滥用——动不动弹窗很烦人！
🤖让AI写互动
告诉AI「点这个按钮，页面上出现一句夸奖的话」，AI秒写全套代码。你负责想玩法，AI负责实现——多出来的时间全用来创意！
💡
交互的黄金法则：用户做了什么，网页就要回应什么！
🔍一次点击的完整旅程
<h1 id="title">点下面的按钮</h1>
<button id="praiseBtn">夸夸我</button>
<script>
let praises = [
"你今天真棒！",
"你的网页做得真好！",
"继续加油，未来的工程师！"
];
let i = 0;
document.getElementById("praiseBtn")
.addEventListener("click", function () {
document.getElementById("title").innerText = praises[i];
i = (i + 1) % praises.length;
});
</script>你按下按钮的那0.1秒，发生了什么：
👆 第1步：你点击按钮
（触发click事件）
│
▼
👂 第2步：JS早就竖着耳朵
（addEventListener捕捉到）
│
▼
🎬 第3步：执行剧本
（function里的代码开跑）
│
▼
🎉 第4步：网页回应你
（文字变了/弹窗出来了）全程不到1毫秒！
🎮 找找你身边的交互：
· 点「赞」→数字+1（监听click）
· 搜索框打字→联想词弹出
（监听键盘输入）
· 鼠标悬停图片→放大
（监听hover）
右边代码：点一下按钮， 标题就换一句夸夸词—— 感受大脑运转！
🎯小测验
第1题：「监听用户点击按钮」用的是JS的什么机制？
第2题：交互三部曲的正确顺序是？
第3题：alert("你好")的效果是？
📝本课知识点
- ✓点击、移动、敲键盘都是事件
- ✓交互三部曲：找元素→听事件→写剧本
- ✓JS能给网页元素「变脸」
- ✓alert适合调试，正式网站少用
- ✓你出创意，AI写代码
第17课完成！继续探索下一课吧 🚀