📚 学习概览
今日重点学习了JavaScript中的事件处理机制，从基础概念到实际应用，构建了完整的事件处理知识体系。
🎯 核心知识点
1. 事件基础概念
事件 ：用户与页面交互时触发的行为（如点击、移动鼠标等） 事件源 ：绑定事件监听器的元素 事件目标：实际触发事件的元素
// 基础事件绑定
document.getElementById('btn1').onclick = function () {
alert('程序流程')
}2. 事件对象 (Event Object)
事件对象包含了事件发生的所有信息数据集合
常用属性：
-
event.target- 事件目标元素 -
event.type- 事件类型 -
event.clientX/clientY- 相对于窗口的坐标 -
event.offsetX/offsetY- 相对于元素边界的坐标 -
event.pageX/pageY- 相对于页面的坐标
document.getElementById('btn1').onclick = function (event) {
console.log(event.clientX, event.clientY); // 窗口坐标
console.log(event.offsetX, event.offsetY); // 元素坐标
console.log(event.pageX, event.pageY); // 页面坐标
console.log(event.target); // 事件目标
}3. 鼠标跟随效果
利用事件对象实现图片跟随鼠标移动：
document.onmousemove = function (event) {
let x = event.pageX;
let y = event.pageY;
document.querySelector('img').style.left = x + 'px';
document.querySelector('img').style.top = y + "px";
}4. 事件流 (Event Flow)
事件在DOM树中的传播过程，包含三个阶段：
事件流三个阶段：
-
捕获阶段 (Capture Phase) - 从根节点到目标节点
-
目标阶段 (Target Phase) - 到达目标节点
-
冒泡阶段 (Bubble Phase) - 从目标节点回到根节点
代码示例：
// 冒泡阶段（默认）
$span.onclick = function (event) {
console.log('span被点了');
event.stopPropagation(); // 阻止冒泡
}
// 捕获阶段
$span.addEventListener('click', function () {
console.log('span捕获');
}, true); // 第三个参数true表示捕获阶段5. 事件委托 (Event Delegation)
将事件监听器绑定到父元素上，利用事件冒泡机制处理子元素事件
优势：
-
减少事件监听器数量
-
动态元素也能正常响应事件
-
提高性能
// 事件委托示例
$ul.onclick = function (e) {
if (e.target.tagName == "LI") {
alert(e.target.innerHTML);
}
}6. 阻止默认行为
document.querySelector("a").onclick = function (e) {
e.preventDefault(); // 阻止链接跳转
}💼 实战项目：员工信息管理系统【详细查看另外一个文档】
功能特性：
-
✅ 员工信息的增删改
-
✅ 弹窗表单交互
-
✅ 事件委托处理动态元素
🔧 实用技巧
1. 坐标系统理解
-
clientX/Y- 相对于浏览器窗口 -
offsetX/Y- 相对于触发元素 -
pageX/Y- 相对于整个页面（包含滚动）
2. 事件委托的最佳实践
-
使用
e.target判断具体触发元素 -
通过
tagName或className进行元素筛选 -
适用于动态添加的元素
3. 阻止事件传播
-
event.stopPropagation()- 阻止冒泡 -
event.preventDefault()- 阻止默认行为
📝 学习心得
-
事件流理解：掌握事件捕获和冒泡机制是理解事件委托的基础
-
实践重要性：通过表格管理系统项目，将理论知识转化为实际应用
-
代码复用：事件委托技术大大提高了代码的可维护性和性能
-
用户体验：合理的交互设计（如弹窗、确认框）提升用户体验
PS：文档来源于老师。但是不知道博客号所以没有办法@