目录
一、fullscreenchange事件
fullscreenchange 事件是一个浏览器事件，在元素进入或退出全屏模式时触发。它提供了一种方式来检测全屏状态的改变，并且可以用于在全屏模式下执行相应的操作或更新用户界面。
当用户使用全屏功能（例如按下 F11 键）将浏览器窗口切换到全屏模式时，或者通过 JavaScript 调用全屏 API（例如 requestFullscreen()）将指定的元素切换到全屏模式时，fullscreenchange 事件将被触发。
同时，当用户退出全屏模式，或者通过 JavaScript 调用全屏 API 将元素从全屏模式中退出时，也会触发 fullscreenchange 事件。
示例代码如下所示：
document.addEventListener("fullscreenchange", function(event) {
if (document.fullscreenElement) {
// 元素进入全屏模式
console.log("进入全屏模式");
// 执行相应的操作或更新界面
} else {
// 元素退出全屏模式
console.log("退出全屏模式");
// 执行相应的操作或更新界面
}
});
二、pagehide事件
`pagehide` 事件是一个浏览器事件，当页面被隐藏时触发。它是页面卸载过程中的一部分，会在用户离开当前标签页或关闭浏览器时被触发。通过监听 `pagehide` 事件，您可以捕获用户离开页面的时机，并执行相应的操作。
`pagehide` 事件与 `unload` 事件类似，但有一些区别。主要区别在于 `pagehide` 事件是一个可取消的事件（cancelable），这意味着可以通过取消事件的默认行为来阻止页面的隐藏。相比之下，`unload` 事件是不可取消的，页面的卸载无法被阻止。
以下是使用 `pagehide` 事件的基本流程：
1. 使用 `addEventListener` 方法将 `pagehide` 事件绑定到 `window` 对象或 `document` 对象上。
2. 在事件处理程序中，可以执行需要在页面隐藏时进行的操作，例如保存未保存的数据、发送统计信息等。
3. 如果需要阻止页面的隐藏，可以调用事件对象的 `preventDefault()` 方法。
示例代码如下所示：
window.addEventListener("pagehide", function(event) {
// 执行页面隐藏时的操作
console.log("页面即将隐藏");
// 如果需要阻止页面的隐藏，取消事件的默认行为
event.preventDefault();
});
需要注意的是，由于 `pagehide` 事件发生时，页面已经被隐藏，所以在事件处理程序中执行的操作应该是轻量级的，以避免影响用户体验。
通过使用 `pagehide` 事件，您可以在用户离开页面之前捕获时机，并在必要时执行相应的操作。这对于保存数据、清理资源、发送统计信息等场景非常有用。
三、pageshow事件
`pageshow` 事件是一个浏览器事件，当页面被展示时触发。它是页面加载和显示过程的一部分，并在用户打开新的标签页、导航回当前标签页或刷新页面时被触发。`pageshow` 事件提供了一种方式来捕获页面显示的时机，并执行相应的操作。
`pageshow` 事件与 `DOMContentLoaded` 和 `load` 事件不同，它在页面显示时触发，而不是在页面完全加载或 DOMContentLoaded 事件触发时。
以下是使用 `pageshow` 事件的基本流程：
1. 使用 `addEventListener` 方法将 `pageshow` 事件绑定到 `window` 对象或 `document` 对象上。
2. 在事件处理程序中，可以执行需要在页面展示时进行的操作，例如恢复状态、加载数据等。
示例代码如下所示：
window.addEventListener("pageshow", function(event) {
// 执行页面展示时的操作
console.log("页面已展示");
});
需要注意的是，`pageshow` 事件在页面刷新时也会触发。因此，在事件处理程序中执行的操作应该是可重复执行的，以确保在页面刷新时也能正常工作。
通过使用 `pageshow` 事件，您可以在页面展示时捕获时机，并执行相应的操作。这对于恢复状态、加载数据或执行其他与页面展示相关的操作非常有用。
四、hashchange事件
`hashchange` 事件是一个浏览器事件，在 URL 的片段标识符（即哈希值）发生变化时触发。片段标识符是 URL 中位于 `#` 符号后面的部分。`hashchange` 事件提供了一种监听 URL 哈希值变化的方式，以便在哈希值改变时执行相应的操作。
在 Web 应用中，经常使用 URL 的片段标识符来实现前端路由或页面状态管理。当用户点击页面内的链接或执行其他操作导致 URL 的哈希值发生变化时，`hashchange` 事件就会被触发。
以下是使用 `hashchange` 事件的基本流程：
1. 使用 `addEventListener` 方法将 `hashchange` 事件绑定到 `window` 对象上。
2. 在事件处理程序中，可以通过 `location.hash` 属性获取当前的哈希值，并执行相应的操作。
示例代码如下所示：
window.addEventListener("hashchange", function(event) {
// 获取当前的哈希值
var newHash = location.hash;
// 执行相应的操作，例如根据哈希值加载不同的内容或触发前端路由逻辑
console.log("哈希值发生变化：" + newHash);
});
通过监听 `hashchange` 事件，您可以实时获取 URL 哈希值的变化，并根据需要执行相应的操作，例如更新页面内容、切换视图或进行前端路由导航等。
需要注意的是，`hashchange` 事件只能监听到 URL 哈希值的变化，而无法监听其他 URL 的改变（如协议、域名、路径等）。对于监听整个 URL 的变化，可以使用 `popstate` 事件和 History API。
五、online事件
`online` 事件是一个浏览器事件，在设备的网络连接状态从离线转为在线时触发。它用于检测设备的网络连接状态，并在设备重新连接到网络时执行相应的操作。
当设备处于离线状态（没有网络连接）时，如果网络连接恢复，浏览器会触发 `online` 事件，通知 JavaScript 代码设备已经重新连接到网络。
以下是使用 `online` 事件的基本流程：
1. 使用 `addEventListener` 方法将 `online` 事件绑定到 `window` 对象上。
2. 在事件处理程序中，可以执行需要在设备重新连接到网络时进行的操作，例如加载数据、发送请求等。
示例代码如下所示：
window.addEventListener("online", function(event) {
// 设备已重新连接到网络
console.log("设备已在线");
});
通过监听 `online` 事件，您可以在设备重新连接到网络时捕获时机，并执行相应的操作。这对于在离线状态下缓存数据或提醒用户设备已重新连接到网络非常有用。
需要注意的是，`online` 事件只能检测到设备从离线转为在线的状态变化，并不能检测设备是否一直保持在线状态。如果需要检测设备的在线状态，可以使用 `navigator.onLine` 属性。当 `navigator.onLine` 为 `true` 时，表示设备当前在线；当为 `false` 时，表示设备当前离线。
六、offline事件
`offline` 事件是一个浏览器事件，在设备的网络连接状态从在线转为离线时触发。它用于检测设备的网络连接状态，并在设备断开网络连接时执行相应的操作。
当设备处于在线状态（有网络连接）时，如果网络连接中断，浏览器会触发 `offline` 事件，通知 JavaScript 代码设备已经离线。
以下是使用 `offline` 事件的基本流程：
1. 使用 `addEventListener` 方法将 `offline` 事件绑定到 `window` 对象上。
2. 在事件处理程序中，可以执行需要在设备断开网络连接时进行的操作，例如显示离线状态提示、暂停数据上传等。
示例代码如下所示：
window.addEventListener("offline", function(event) {
// 设备已离线
console.log("设备已离线");
});
通过监听 `offline` 事件，您可以在设备断开网络连接时捕获时机，并执行相应的操作。这对于需要在离线状态下处理数据或提醒用户设备已断开网络连接非常有用。
需要注意的是，`offline` 事件只能检测到设备从在线转为离线的状态变化，并不能检测设备是否一直保持离线状态。如果需要检测设备的在线状态，可以使用 `navigator.onLine` 属性。当 `navigator.onLine` 为 `true` 时，表示设备当前在线；当为 `false` 时，表示设备当前离线。
七、popstate事件
`popstate` 事件是 JavaScript 中的一个浏览器事件，当浏览器的历史记录（即通过 `history.pushState()` 或 `history.replaceState()` 修改的 URL）发生变化时触发。
通常，当用户点击浏览器的前进或后退按钮时，或者通过 JavaScript 调用 `history.back()`、`history.forward()`、`history.go()` 方法导致历史记录变化时，都会触发 `popstate` 事件。
`popstate` 事件提供了一个机会，让开发者在浏览器的历史记录变化时执行相应的操作。例如，可以使用 `popstate` 事件来更新页面内容、刷新数据或执行其他与 URL 变化相关的操作。
以下是使用 `popstate` 事件的基本流程：
1. 使用 `addEventListener` 方法将 `popstate` 事件绑定到 `window` 对象上。
2. 在事件处理程序中，可以根据需要执行与 URL 变化相关的操作。
示例代码如下所示：
window.addEventListener("popstate", function(event) {
// 历史记录发生变化
console.log("历史记录变化");
// 执行其他操作，如更新页面内容或刷新数据
});
需要注意的是，当页面首次加载时不会触发 `popstate` 事件。只有在页面已经加载并且发生了历史记录变化时，才会触发该事件。
另外，通过调用 `history.pushState()`、`history.replaceState()` 或浏览器的前进/后退按钮，都可以修改历史记录并触发 `popstate` 事件。但是，请注意避免在 `popstate` 事件处理程序中再次调用这些方法，以免引发无限循环。
八、devicemotion事件
`devicemotion` 事件是 JavaScript 中的一个设备事件，它在设备的物理运动状态发生变化时触发。该事件提供了设备的加速度和旋转速率等相关信息，用于检测设备的运动状态。
当设备移动、旋转或发生其他物理运动时，例如在移动设备上进行摇晃、旋转设备或倾斜设备，浏览器会生成 `devicemotion` 事件，并将相关数据传递给事件处理程序。
`devicemotion` 事件对象包含了以下属性：
- `acceleration`：表示设备的加速度，以三维坐标形式表示，即 `{ x: number, y: number, z: number }`。
- `accelerationIncludingGravity`：表示包含重力加速度的总加速度，以三维坐标形式表示。
- `rotationRate`：表示设备的旋转速率，以三维坐标形式表示，即 `{ alpha: number, beta: number, gamma: number }`。
- `interval`：表示生成 `devicemotion` 事件的时间间隔。
以下是使用 `devicemotion` 事件的基本流程：
1. 使用 `addEventListener` 方法将 `devicemotion` 事件绑定到 `window` 对象上。
2. 在事件处理程序中，可以通过 `event.acceleration`、`event.accelerationIncludingGravity` 和 `event.rotationRate` 等属性获取设备的加速度和旋转速率等信息，并执行相应的操作。
示例代码如下所示：
window.addEventListener("devicemotion", function(event) {
// 获取设备的加速度信息
var acceleration = event.acceleration;
var accelerationIncludingGravity = event.accelerationIncludingGravity;
// 获取设备的旋转速率信息
var rotationRate = event.rotationRate;
// 执行其他操作，如根据加速度进行某些动作或旋转等
});
需要注意的是，`devicemotion` 事件可能会频繁触发，具体触发频率取决于设备和浏览器的实现。在处理事件时，可以根据需要选择适当的方式进行节流或过滤，以免触发太频繁而影响性能。
此外，`devicemotion` 事件需要设备支持并获得用户授权才能使用。在移动设备上，通常需要用户允许浏览器访问设备的运动传感器。
九、deviceorientation事件
`deviceorientation` 事件是 JavaScript 中的一个设备事件，它在设备的方向发生变化时触发。该事件提供了设备的方向信息，包括设备的倾斜、旋转和方位角等。
当设备发生旋转、倾斜或方向变化时，例如在移动设备上改变设备的方向或旋转设备，浏览器会生成 `deviceorientation` 事件，并将相关数据传递给事件处理程序。
`deviceorientation` 事件对象包含了以下属性：
- `alpha`：表示设备绕 z 轴的旋转角度，范围为 0 到 360 度。
- `beta`：表示设备绕 x 轴的倾斜角度，范围为 -180 到 180 度。
- `gamma`：表示设备绕 y 轴的倾斜角度，范围为 -90 到 90 度。
- `absolute`：表示设备方向信息是否是绝对值。如果为 `true`，则表示提供了绝对方向信息；如果为 `false`，则表示提供的是相对方向信息。
以下是使用 `deviceorientation` 事件的基本流程：
1. 使用 `addEventListener` 方法将 `deviceorientation` 事件绑定到 `window` 对象上。
2. 在事件处理程序中，可以通过 `event.alpha`、`event.beta` 和 `event.gamma` 等属性获取设备的方向信息，并执行相应的操作。
示例代码如下所示：
window.addEventListener("deviceorientation", function(event) {
// 获取设备的方向信息
var alpha = event.alpha;
var beta = event.beta;
var gamma = event.gamma;
// 执行其他操作，如根据方向信息调整页面布局或进行相应的动作等
});
需要注意的是，`deviceorientation` 事件可能会频繁触发，具体触发频率取决于设备和浏览器的实现。在处理事件时，可以根据需要选择适当的方式进行节流或过滤，以免触发太频繁而影响性能。
此外，`deviceorientation` 事件需要设备支持并获得用户授权才能使用。在移动设备上，通常需要用户允许浏览器访问设备的方向传感器。