当前位置：首页 > backend >正文

第三章支线四 ·事件风暴 · 时序与响应的协奏

backend 2025/6/22 23:02:35

主线回顾

第三章：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()
冒泡捕获	控制传播方向与顺序
委托机制	高效监听子元素事件