JS-第二十天-事件（二）-EW帮帮网

📚 学习概览

今日重点学习了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：文档来源于老师。但是不知道博客号所以没有办法@

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