医院网站建设策划中国seo
主线回顾
第三章：JavaScript引擎 · 行为之火
支线
支线一 ·原能之核：语法起源
支线二 ·函数幻阶：语法召唤与逻辑封印
支线三 ·异步幻境 · 时间之缝的挑战
🎬 剧情设定：
在时间裂隙之外，是一座由光与风构建的浮空之岛：风涌之环（Event Ring）。
此地，按钮能言，鼠标有魂，键盘之击能激活古老的魔纹。
岛上守护者是三姐妹：
• 芙蕾雅：掌管「绑定与移除」
• 艾薇儿：掌管「冒泡与捕获」
• 蒂亚娜：掌管「事件代理术」
她们合称——「响应律三巫」，世代守护网页的用户交互核心机制。
🌀 第一节 · 事件的诞生：绑定与响应
林昊先遇芙蕾雅，学习最基本的响应方式。
🧪 教学要点：事件绑定
<button id="btn">点击我</button>
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {alert("按钮被点击了！");
});
- addEventListener(eventType, handler)
- 可以绑定多个不同事件，如 “click”、“mouseover”、“keydown” 等
- 用 removeEventListener 可解绑
🧭 第二节 · 事件对象 Event Object
每一个事件其实都是一个对象的降临，带着信息而来：
btn.addEventListener("click", function (event) {console.log(event.type); // "click"console.log(event.target); // 被点击的元素
});
- event.type: 事件类型
- event.target: 触发事件的元素
- event.preventDefault(): 阻止默认行为
- event.stopPropagation(): 停止冒泡
芙蕾雅说：“事件之灵，总会将自己的身份藏在 event 之壳中。学会解读，你将掌控一切交互的意图。”
🌊 第三节 · 冒泡与捕获
林昊步入涌动之厅，墙上刻着一棵事件流的倒挂树。
教学点：事件传播机制
- 捕获阶段（Capturing Phase）：从外层向目标前进
- 目标阶段（Target Phase）：事件抵达触发元素
- 冒泡阶段（Bubbling Phase）：事件自目标向上传递回根
outerDiv.addEventListener("click",() => {console.log("外层被点击（冒泡）");},false
);innerDiv.addEventListener("click",() => {console.log("内层被点击（捕获）");},true // 捕获阶段监听
);
艾薇儿叮嘱：“控制传播，是控制响应的先后顺序。记住——你可以拦截风暴，也可以引导它传递。”
🧬 第四节 · 委托之术（事件委托）
在最后的风洞，林昊遇到蒂亚娜，她只操作父元素，却响应成百上千的子元素行为。
教学点：事件委托（Event Delegation）
<ul id="list"><li>苹果</li><li>香蕉</li><li>樱桃</li>
</ul>
document.getElementById("list").addEventListener("click", (event) => {if (event.target.tagName === "LI") {alert("你点击了：" + event.target.innerText);}
});
- 原理：借由冒泡，统一在父元素监听事件
- 场景：列表、表格、动态组件等性能优化场合
蒂亚娜轻语：“事件不是孤立发生的，它总在向上寻找知音。你只需守在高处，静待风之呢喃。”
🛠 实战任务：风暴试炼
- 编写按钮点击事件，修改页面颜色
- 使用事件对象，显示点击位置的坐标
- 制作一个点击列表项高亮的委托逻辑
- 实验 preventDefault()：阻止链接跳转行为
🎓 本章回顾与技能总结
| 技能 | 内容 |
|---|---|
| 事件监听 | addEventListener(type, handler) |
| 事件对象 | event.target, event.type, preventDefault() |
| 冒泡捕获 | 控制传播方向与顺序 |
| 委托机制 | 高效监听子元素事件 |
🎁 林昊成长印记
获得称号：风暴行者（Stormbinder）
技能解锁：
- 快速响应用户操作
- 掌握事件传播逻辑
- 编写高效、可维护的交互逻辑