JS-第二十天-事件（二）

📚 学习概览

今日重点学习了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树中的传播过程，包含三个阶段：

事件流三个阶段：

1. 捕获阶段 (Capture Phase) - 从根节点到目标节点

2. 目标阶段 (Target Phase) - 到达目标节点

3. 冒泡阶段 (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() - 阻止默认行为

---

📝 学习心得

1. 事件流理解：掌握事件捕获和冒泡机制是理解事件委托的基础

2. 实践重要性：通过表格管理系统项目，将理论知识转化为实际应用

3. 代码复用：事件委托技术大大提高了代码的可维护性和性能

4. 用户体验：合理的交互设计（如弹窗、确认框）提升用户体验

---

PS：文档来源于老师。但是不知道博客号所以没有办法@