目录

一、fullscreenchange事件

二、pagehide事件

三、pageshow事件

四、hashchange事件

五、online事件

六、offline事件

七、popstate事件

八、devicemotion事件

九、deviceorientation事件


一、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` 事件需要设备支持并获得用户授权才能使用。在移动设备上,通常需要用户允许浏览器访问设备的方向传感器。

JavaScript中几个不常用的绑定事件相关推荐

  1. JavaScript 中的内存和性能、模拟事件(读书笔记思维导图)

    由于事件处理程序可以为现代 Web 应用程序提供交互能力,因此许多开发人员会不分青红皂白地向页面中添加大量的处理程序.在 JavaScript 中,添加到页面上的事件处理程序数量将直接关系到页面的整体 ...

  2. JavaScript 中判断一个函数的 this 绑定

    this 是一个很特别的关键字,被自动定义在所有函数的作用域中.this 实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用(这句话不适用于箭头函数,想了解箭头函数的可以前往ES6 ...

  3. html下拉框onchange事件,javascript 中select标签上放入onchange事件的两种方式分享

    摘要: 下文讲述在html标签select上放入onchange事件的方式分享,如下所示: 例1: maomao365.com js select上直接使用onchange的方法 function s ...

  4. JavaScript中的BOM操作之浏览器常见事件

    ①click点击事件 <body> <div id="d">我是div</div> <script> //直接绑定事件处理函数 d. ...

  5. JavaScript绑定事件的方法[3种]

    要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的 ...

  6. 图解javascript中this指向

    JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发JavaScript其实很难掌握,有些 ...

  7. javascript中this

    JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发现 JavaScript其实很难掌握, ...

  8. JavaScript中call和apply方法

    1 /* 2 在js中 call和apply常用于绑定作用域 3 */ 4 //1 简单的绑定 5 function sum(a,b){ 6 return a+b; 7 } 8 //将sum的功能绑定 ...

  9. javascript中reduce的用法

    文章目录 一.reduce基本语法 二.reduce常用场景 1. 求和 2. 数据拼接 三.实际项目中使用示例 1. 模拟Redux中的compose方法 1.1. 简单写法 1.2 利用reduc ...

最新文章

  1. 28行代码AC——Minimum Sum LCM UVA - 10791(最大质因子)
  2. 电商如何“链”动新春,看聚划算助力“原年人”的好日子
  3. php 不支持curl 的解决方案
  4. 程序员的基础和解决问题的思维很重要
  5. DirectX 初始化DirectX(手写和红龙书里面的方式)
  6. java interruptedexception_如何正确的处理InterruptedException
  7. 137_原始套接字_发送UDP数据,模仿他人飞秋给另一个飞秋客户端发送信息
  8. java object 转 double_Java 类型转换以及Object转成其他类型
  9. Android - 警告:it is always overridden by the value specified in the Gradle build script
  10. 传染病研究-靶向下一代宏基因组测序(mNGS)分析
  11. r语言实现岭回归_R语言回归篇
  12. 无法访问gcr.io的解决办法
  13. Unity优化大全(七)之 GPU-Ligh和其他
  14. linux5关闭apic服务,阐述Linux内核里面的APIC编程
  15. MySQL表级锁之表锁
  16. js对手机号码进行校验
  17. W5500开发笔记 | 02 - 使用W5500 Socket API 建立TCP服务端、TCP客户端
  18. python安装包时出现的一些问题及解决方法
  19. 正则表达式不包含某些字符,包含某些字符
  20. secureCRT Ctrl + C

热门文章

  1. Omnigraffle绘制泳道图教程
  2. c语言位运算试题及解析,C语言面试题分类-位运算
  3. 国产数据库备份恢复(TiDB\达梦\OceanBase\openGauss\GaussDB\GBASE)——筑梦之路
  4. 动态规划法解决矩阵连乘问题
  5. win10键盘变成快捷键_这6个电脑操作技巧,会让你爱上Win10系统
  6. 使用m2eclipse为eclipse集成Maven
  7. 关于给java数组循环赋值时报错Exception in thread “main“ java.lang.ArrayIndexOutOfBoundsException: 5
  8. 零售运营中的PP之价格策略(Pricing)分析
  9. opencv保存图片成视频无法播放、没写成功(指定路径下没有)
  10. Rw Everything / HE ,在Win11 22H2,无法运行,启动失败,用不了,一键式解决方案 WinBusyBox,多Windows OS版本测试有效