page lifecycle(网页生命周期)
document.visibitilityState 来监听网页可见度，是否卸载
focus 事件
focus事件在页面获得输入焦点时触发。
blur 事件
blur事件在页面失去输入焦点时触发。
visibilitychange 事件
visibilitychange事件在网页可见状态发生变化时触发.
window.addEventListener('visibilitychange',() => {
// 通过这个方法来获取当前标签页在浏览器中的激活状态。
switch(document.visibilityState){
case'prerender': // 网页预渲染 但内容不可见
case'hidden': // 内容不可见 处于后台状态，最小化，或者锁屏状态
case'visible': // 内容可见
case'unloaded': // 文档被卸载
}
});freeze 事件
freeze事件在网页进入挂起状态时触发。
resume 事件
resume事件在网页离开挂起，恢复时触发。
pageshow 事件
pageshow事件在用户加载网页时触发。这时，有可能是全新的页面加载，也可能是从缓存中获取的页面。如果是从缓存中获取，则该事件对象的event.persisted属性为true，否则为false
pagehide 事件
pagehide事件在用户离开当前网页、进入另一个网页时触发。它的前提是浏览器的 History 记录必须发生变化，跟网页是否可见无关。
beforeunload 事件
beforeunload事件在窗口或文档即将卸载时触发。
unload 事件
unload事件在页面正在卸载时触发
online state（网络状态）
window.addEventListener('online',onlineHandler)
window.addEventListener('offline',offlineHandler)Vibration（震动）
// 可以传入一个大于0的数字，表示让手机震动相应的时间长度，单位为ms
navigator.vibrate(100)
// 也可以传入一个包含数字的数组，比如下面这样就是代表震动300ms，暂停200ms，震动100ms，暂停400ms，震动100ms
navigator.vibrate([300,200,100,400,100])
// 也可以传入0或者一个全是0的数组，表示暂停震动
navigator.vibrate(0)device orientation（陀螺仪）
window.addEventListener('deviceorientation',e => {
console.log('Gamma:',e.gamma); // 设备沿着Y轴的旋转角度
console.log('Beta:',e.beta); //设备沿着X轴的旋转角度
console.log('Alpha:', e.alpha); //设备沿着Z轴的旋转角度
})注意
alpha 是以手机自带指南针为标准，及手机认为的南方为 0 ，需要注意手机不一定支持指南针，所以会出现偏差
battery status（电量）
// 通过这个方法来获取battery对象
navigator.getBattery().then(battery => {
// battery 对象包括中含有四个属性
// charging 是否在充电
// level 剩余电量
// chargingTime 充满电所需事件
// dischargingTime 当前电量可使用时间
const { charging, level, chargingTime, dischargingTime } = battery;
// 同时可以给当前battery对象添加事件 对应的分别时充电状态变化 和 电量变化
battery.onchargingchange = ev => {
const { currentTarget } = ev;
const { charging } = currentTarget;
};
battery.onlevelchange = ev => {
const { currentTarget } = ev;
const { level } = ev;
}
})【参考】
转载请保留原文链接： https://zodream.cn/blog/id/22.html