当前位置：首页 > 行业动态 > 正文

h5监听api

H5监听API通过addEventListener绑定事件，如页面加载

H5监听API详解

HTML5提供了丰富的监听API,允许开发者实时捕获用户行为、设备状态变化、网络环境波动等关键事件，通过合理使用这些API，可以显著提升网页的交互性、性能优化和用户体验，以下是H5监听API的核心分类、使用方法及典型场景。

设备与环境监听

事件类型 触发条件 核心属性/方法
window.ondeviceorientation 设备方向发生改变（如手机横竖屏切换） event.alpha（绕Z轴旋转角度）、event.beta（绕X轴倾斜角度）、event.gamma（绕Y轴倾斜角度）
window.onorientationchange 设备物理方向改变（部分浏览器支持） window.orientation.type（返回landscape或portrait）、window.orientation.angle（旋转角度）
window.matchMedia 媒体查询条件变化（如屏幕宽度、分辨率） MediaQueryList.addListener（监听CSS媒体查询变化）

示例：监听设备横竖屏切换

window.addEventListener('deviceorientation', (e) => {
  if (e.alpha === 0 && e.beta === 90) {
    console.log('设备处于竖屏状态');
  }
});

网络状态监听

事件类型 触发条件 核心属性/方法
window.ononline 设备重新连接网络 无特定属性，需结合navigator.onLine判断状态
window.onoffline 设备断开网络连接 同上
navigator.connection 网络连接类型变化（部分浏览器支持） connection.effectiveType（返回4g、wifi等）

示例：监听网络状态并提示用户

h5监听api 第1张

window.addEventListener('online', () => {
  alert('网络已连接');
});
window.addEventListener('offline', () => {
  alert('网络已断开');
});

页面生命周期监听

事件类型 触发条件 核心属性/方法
window.onload 页面所有资源加载完成 无特定属性，常用于初始化操作
window.onbeforeunload 用户关闭或刷新页面前 event.returnValue（设置提示文字，需配合return使用）
document.visibilityState 页面可见性状态变化（如切换标签页） document.addEventListener('visibilitychange', callback)，document.hidden属性判断隐藏状态

示例：阻止页面关闭并提示

window.onbeforeunload = (e) => {
  const message = '确定要离开当前页面吗？';
  e.returnValue = message; // 兼容旧版浏览器
  return message; // 标准写法
};

触摸与手势监听

事件类型 触发条件 核心属性/方法
touchstart 手指接触屏幕 event.touches（当前触摸点集合）、event.targetTouches（目标元素上的触摸点）
touchmove 手指在屏幕滑动 event.preventDefault()（阻止默认滚动行为）
touchend 手指离开屏幕 event.changedTouches（本次变动的触摸点集合）

示例：禁止页面默认滚动行为

element.addEventListener('touchmove', (e) => {
  e.preventDefault(); // 阻止滚屏
}, { passive: false });

其他重要监听

  1. 全屏模式监听

    • webkitfullscreenchange / fullscreenchange：监听全屏状态切换
    • document.fullscreenElement：判断当前全屏元素

  2. 剪切板监听

    • window.oncopy / window.oncut / window.onpaste：监听复制/剪切/粘贴操作
    • event.clipboardData：访问剪切板数据（需用户主动触发）

  3. Web存储事件

    • storage：监听localStorage在同一窗口的其他标签页变化
    • storage：监听sessionStorage在同源不同窗口的变化

FAQs

Q1：如何优化高频事件监听的性能？
A：对于scroll、resize、touchmove等高频触发的事件，建议使用防抖（debounce）或节流（throttle）技术。 

let debounceTimer;
window.addEventListener('resize', () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    console.log('窗口尺寸调整完成');
  }, 300);
});

Q2：如何判断浏览器是否支持某个监听API？
A：可通过typeof或直接检查事件对象是否存在，例如检测Visibility API： 

if (typeof document.hidden !== 'undefined') {
  document.addEventListener('visibilitychange', () => {
    console.log(`页面可见性：${!document.hidden}`);
  });
} else {
  console.warn('当前浏览器不支持Visibility API
html5
0

相关文章