专项事件体系

3.5 专项事件体系

专项事件体系是浏览器针对特定业务场景提供的垂直事件集合，覆盖表单交互、剪贴板操作、拖拽交互、页面状态、网络状态等专项业务场景，能够精准响应特定功能的状态变化与用户操作。

这类事件针对性强，具备专属的事件对象属性与操作方法，是实现对应业务功能的核心事件支撑。

---

3.5.1 表单事件体系

表单事件是处理表单交互、输入校验、数据提交的核心事件体系，围绕表单元素与输入控件的状态变化、提交操作触发，覆盖表单从输入到提交的完整交互流程。

一、核心表单事件一览

|------------|-----------------------------|----------------------|--------------------------------------|
| 事件 | 绑定对象 | 触发时机 | 核心特点 |
| submit | <form> 元素 | 表单提交时触发（点击提交按钮、回车提交） | 可拦截表单默认提交行为，用于表单校验与提交拦截 |
| reset | <form> 元素 | 表单重置时触发 | 表单控件值恢复为初始值，可拦截重置行为 |
| input | 输入控件（input/textarea/select） | 输入值实时变化时触发 | 每一次输入、删除、粘贴都立即触发，适合实时校验、实时反馈 |
| change | 输入控件 | 输入值确认变化时触发 | 失去焦点、按下回车、选择下拉选项时触发；输入过程中不触发，适合最终值校验 |
| focus | 输入控件 | 控件获得焦点时触发 | 不冒泡，常用于输入框激活样式、提示浮层展示 |
| blur | 输入控件 | 控件失去焦点时触发 | 不冒泡，常用于失焦校验、输入状态收尾 |
| select | 文本输入控件 | 选中文本时触发 | 文本内容被选中时触发，用于选中文本操作 |

二、重点区分：input 与 change 事件

这是表单事件的核心易错点，二者触发时机差异显著：

• input：实时触发，只要值发生变化就立即触发，输入过程中持续回调。适用于实时字数统计、实时搜索联想、实时格式校验。
• change：确认变化时触发，输入过程中不触发，只有结束输入（失焦、回车、选择完成）时才触发。适用于最终值提交校验、状态更新。

三、典型应用示例

1. 表单提交拦截与校验

const form = document.querySelector('#loginForm');

form.addEventListener('submit', (e) => {

  e.preventDefault(); // 阻止默认页面刷新提交

  const username = form.username.value.trim();

  if (!username) {

    alert('请输入用户名');

    return;

  }

  // 执行自定义提交逻辑

  console.log('提交表单数据');

});

2. 实时输入字数统计

const input = document.querySelector('#textInput');

const count = document.querySelector('#count');

input.addEventListener('input', () => {

  count.textContent = `${input.value.length}/100`;

});

---

3.5.2 剪贴板事件：copy/paste/cut

剪贴板事件用于监听和操作用户的复制、粘贴、剪切操作，通过事件对象可以访问剪贴板数据，实现内容拦截、修改、自定义注入等功能，是内容编辑、富文本场景的常用事件。

一、核心剪贴板事件

|-----------|----------------------------|--------------------|
| 事件 | 触发时机 | 操作对象 |
| copy | 用户执行复制操作（Ctrl+C / 右键复制）时触发 | 选中的文本内容 |
| cut | 用户执行剪切操作（Ctrl+X / 右键剪切）时触发 | 选中的文本内容，剪切后原内容会被移除 |
| paste | 用户执行粘贴操作（Ctrl+V / 右键粘贴）时触发 | 剪贴板中的内容 |

二、剪贴板数据操作

事件对象通过 clipboardData 属性提供剪贴板数据的读写能力，支持不同格式的数据：

// 监听复制事件，修改复制内容

document.addEventListener('copy', (e) => {

  e.preventDefault(); // 阻止默认复制行为

  const selection = window.getSelection().toString();

  // 写入自定义内容，追加版权信息

  e.clipboardData.setData('text/plain', selection + '\n\n转载自xxx文档');

});

// 监听粘贴事件，过滤粘贴格式

const input = document.querySelector('textarea');

input.addEventListener('paste', (e) => {

  e.preventDefault();

  // 获取纯文本内容，去除富文本格式

  const text = e.clipboardData.getData('text/plain');

  // 插入纯文本到输入框

  document.execCommand('insertText', false, text);

});

三、核心特点与注意事项

1. 事件冒泡：剪贴板事件支持冒泡，可全局监听也可绑定到特定元素。
2. 权限限制：读取剪贴板数据受浏览器安全策略限制，部分场景需要用户授权；页面可见状态下才能正常操作。
3. 数据格式：支持纯文本、HTML、图片等多种数据格式，通过 setData / getData 的 MIME 类型区分。
4. 典型场景：复制追加版权声明、粘贴去除格式、图片粘贴上传、剪贴板内容校验。

---

3.5.3 拖放 API：dragstart/dragover/drop

HTML5 原生拖放 API 提供了完整的拖拽交互事件体系，支持元素拖拽、文件拖拽等场景，通过事件与 dataTransfer 对象实现拖拽数据传递与交互控制，是拖拽排序、文件上传等功能的原生实现方案。

一、拖放完整事件流

一次完整的拖拽操作分为拖拽源事件和放置目标事件两类，按顺序依次触发：

|----------|-----------|--------|--------------------------|
| 阶段 | 事件 | 触发对象 | 触发时机 |
| 拖拽开始 | dragstart | 拖拽源元素 | 按下鼠标开始拖拽时触发，仅触发一次 |
| 拖拽过程 | drag | 拖拽源元素 | 拖拽移动过程中持续触发，类似 mousemove |
| 进入目标 | dragenter | 放置目标元素 | 拖拽指针进入目标元素边界时触发 |
| 悬停目标 | dragover | 放置目标元素 | 拖拽指针在目标元素内移动时持续触发 |
| 离开目标 | dragleave | 放置目标元素 | 拖拽指针离开目标元素边界时触发 |
| 放置释放 | drop | 放置目标元素 | 拖拽释放在目标元素上时触发 |
| 拖拽结束 | dragend | 拖拽源元素 | 拖拽操作完成（成功/取消）后触发 |

二、核心对象：dataTransfer

event.dataTransfer 是拖放 API 的核心数据对象，用于拖拽过程中传递数据、配置拖拽效果。

|-------------------------|----------------------------------|
| 常用属性/方法 | 作用说明 |
| setData(type, data) | 拖拽开始时设置要传递的数据，指定 MIME 类型 |
| getData(type) | 放置时读取拖拽传递的数据 |
| effectAllowed | 设置拖拽源允许的操作类型：copy/move/link/none |
| dropEffect | 设置放置目标的操作效果，需与 effectAllowed 匹配 |
| files | 获取拖拽的本地文件列表，用于文件拖拽上传 |

三、关键注意点

1. dragover 必须阻止默认行为：默认情况下元素不允许放置，dragover 事件中必须调用 e.preventDefault()，drop 事件才会触发。
2. 设置元素可拖拽：普通元素默认不可拖拽，需设置 draggable="true" 才能成为拖拽源。
3. 拖拽结束清理：dragend 中需要清理拖拽样式、临时状态，避免残留。

四、基础示例：元素拖拽放置

<div class="drag-item" draggable="true">可拖拽元素</div>

<div class="drop-target">放置区域</div>

const dragItem = document.querySelector('.drag-item');

const dropTarget = document.querySelector('.drop-target');



// 拖拽开始

dragItem.addEventListener('dragstart', (e) => {

  e.dataTransfer.setData('text/plain', '拖拽传递的数据');

  e.dataTransfer.effectAllowed = 'move';

});



// 拖拽悬停目标

dropTarget.addEventListener('dragover', (e) => {

  e.preventDefault(); // 必须阻止默认，才能触发 drop

  e.dataTransfer.dropEffect = 'move';

  dropTarget.classList.add('drag-over');

});



// 拖拽离开目标

dropTarget.addEventListener('dragleave', () => {

  dropTarget.classList.remove('drag-over');

});



// 放置元素

dropTarget.addEventListener('drop', (e) => {

  e.preventDefault();

  const data = e.dataTransfer.getData('text/plain');

  dropTarget.textContent = `已接收：${data}`;

  dropTarget.classList.remove('drag-over');

});

典型应用场景

• 列表拖拽排序
• 桌面端文件拖拽上传
• 画布元素拖拽布局
• 跨组件数据拖拽传递

---

3.5.4 页面可见性：visibilitychange

visibilitychange 事件用于监听页面的可见状态变化，当用户切换标签页、最小化窗口、锁屏时触发，是精准判断页面用户可见性的标准方案，相比 blur 事件更准确。

一、核心状态与事件

• 事件名：visibilitychange，绑定在 document 上
• 状态属性：document.visibilityState，返回两个枚举值：
  • visible：页面对用户可见，当前标签页处于激活状态
  • hidden：页面不可见，切换到后台标签页、窗口最小化、锁屏状态

二、与 blur/focus 事件的区别

|----------|------------------|---------------------|
| 对比维度 | visibilitychange | window.focus / blur |
| 判断依据 | 页面像素级可见性 | 窗口焦点状态 |
| 触发场景 | 切换标签页、最小化、锁屏 | 切换窗口、点击其他程序 |
| 准确性 | 更高，严格判断页面是否可见 | 较低，窗口失焦但页面可能仍可见 |
| 适用场景 | 视频暂停、埋点统计、动画暂停 | 全局焦点交互 |

三、典型应用示例

// 页面可见性变化控制视频播放

document.addEventListener('visibilitychange', () => {

  const video = document.querySelector('#video');

  if (document.visibilityState === 'hidden') {

    video.pause(); // 页面不可见，暂停视频

  } else {

    video.play(); // 页面可见，恢复播放

  }

});

常见应用场景

• 音视频自动暂停/恢复
• 页面曝光埋点统计
• 轮播图自动暂停
• 后台状态刷新与数据同步

---

3.5.5 网络状态：online/offline

网络状态事件用于监听浏览器的网络连接状态变化，当网络断开、恢复连接时触发，配合 navigator.onLine 属性可实时获取当前网络状态，是离线功能、断线重连的核心依据。

一、核心事件与属性

|-------------|---------------|--------|
| 事件 | 触发时机 | 绑定对象 |
| online | 网络从离线恢复为在线时触发 | window |
| offline | 网络从在线断开为离线时触发 | window |

|----------------------|--------------------------|
| 属性 | 含义 |
| navigator.onLine | 布尔值，true 表示在线，false 表示离线 |

二、核心特点

1. 状态判断依据：浏览器判断网络连接状态，基于网卡连接、网络连通性检测，仅代表设备网络连通性，不代表服务端可访问。
2. 触发时机：物理网卡断开/连接、WiFi 断开/重连、网络切换时触发。
3. 兼容性：所有现代浏览器原生支持，是离线应用的基础事件。

三、典型应用示例

// 监听网络状态变化

window.addEventListener('online', () => {

  console.log('网络已恢复，开始同步离线数据');

  syncOfflineData();

});



window.addEventListener('offline', () => {

  console.log('网络已断开，已切换离线模式');

  showOfflineTip();

});



// 页面加载时判断初始网络状态

if (!navigator.onLine) {

  showOfflineTip();

}

常见应用场景

• 离线模式提示与功能降级
• 离线数据缓存与恢复同步
• 断线自动重连机制
• 大文件下载断点续传判断