第六章：事件风暴 · 用户的意志
剧情引入：风暴来袭
林昊穿越异步幻境后，眼前是一片混乱的城市，城市上空雷云密布——一场“事件风暴”正在爆发。
在这个世界，用户的每一次点击、每一个输入，都会召唤出一股能量。导师零号化身为“风暴记录员”，为林昊解锁新能力：“掌控用户的意志——事件系统。”
事件是什么？
事件是用户和网页之间的桥梁。比如：
- 用户点击按钮 → click 事件
- 用户在输入框打字 → input 事件
- 鼠标移入移出 → mouseover、mouseout
- 用户按键盘 → keydown、keyup
监听事件：addEventListener 的魔法咒语
林昊面前是一扇沉睡的大门，只有点击它，才能唤醒。
<button id="open">开启大门</button>
document.getElementById("open").addEventListener("click", function() {console.log("大门开启！");
});
使用 addEventListener(event, callback)，可以监听各种用户操作。
常见事件类型速查表
| 事件类型 | 名称 | 场景 |
|---|---|---|
| click | 点击 | 点击按钮、链接等 |
| input | 输入变化 | 文本框输入时触发 |
| submit | 提交表单 | 表单点击提交按钮时触发 |
| change | 变化 | 下拉菜单、复选框等变化时 |
| keydown | 按下键盘 | 键盘交互 |
| mouseover | 鼠标移入 | 鼠标悬停在元素上 |
事件对象 Event Object：风暴的信息核心
当林昊触摸到按钮时，风暴中浮现一份情报——这是事件对象。
document.addEventListener("click", function(e) {console.log("你点击了：", e.target);console.log("事件类型：", e.type);console.log("坐标：", e.clientX, e.clientY);
});
e 是事件对象，包含当前事件发生的全部信息。
事件冒泡与阻止传播
风暴能量从内向外扩散，这就是事件冒泡（bubbling）。
HTML结构如下：
<div id="outer"><button id="inner">点我</button>
</div>
监听事件：
document.getElementById("outer").addEventListener("click", () => {console.log("外层被点");
});document.getElementById("inner").addEventListener("click", (e) => {console.log("内层被点");e.stopPropagation(); // 阻止冒泡
});
点击按钮时，如果不阻止传播，outer 也会触发。
使用 e.stopPropagation() 可中断风暴扩散。
事件委托：聚焦一点，管理全局
在风暴密集区域，不能为每一处都布控，导师教林昊使用“事件委托”：
HTML结构：
<ul id="menu"><li>苹果</li><li>香蕉</li><li>橙子</li>
</ul>
JS 只绑定在父元素上：
document.getElementById("menu").addEventListener("click", (e) => {if (e.target.tagName === "LI") {console.log("你选择了：" + e.target.innerText);}
});
高效、优雅，适用于动态添加的内容。
🧩 实战任务 · 小型风暴模拟器
- 写一个按钮点击后，控制台输出“按钮已被点击”；
- 给文本框添加 input 事件，实时打印用户输入内容；
- 给列表动态绑定点击事件，打印点击的列表项内容；
- 理解并演示事件冒泡和 stopPropagation 的效果；
- 实现一个“切换灯光”的按钮，点一下变亮，再点一下变暗。
🔮 预告：第七章《组件之城》
当事件风暴平息，林昊即将踏入传说中的“组件之城”，学习如何将页面拆分成可复用、模块化的组件单位——那是前端开发者构建世界的真正方式！