全屏 API 允许网页在全屏模式下运行，这可以提供更丰富的体验和更好的用户交互性。然而，在使用全屏 API 时，我们需要知道哪些事件会被触发，以便在开发过程中进行相应的处理。
Fullscreen API 概述
Fullscreen API 定义了一个全局的 document.fullscreenElement 属性，用于指定当前正在全屏模式下运行的元素。通过调用该元素的 requestFullscreen() 方法，可以将元素进入全屏模式，而调用 document.exitFullscreen() 方法则可以退出全屏模式。
Fullscreen API 中的事件
在全屏模式下，以下事件可能会被触发：
fullscreenchange：当全屏状态改变时触发，例如从非全屏状态切换到全屏状态或者从全屏状态切换到非全屏状态。fullscreenerror：当无法进入全屏模式时触发，例如用户拒绝了请求、浏览器不支持全屏模式等情况。
以下是示例代码，演示如何监听这些事件：
----- ------- - --------------------------------------
-------------------------------------------- ------- -- -
----- ----------------- - ---------------------------
-- ------------------- -
-------------------------- --------------------------
- ---- -
----------------------
-
---
------------------------------------------- ------- -- -
-------------------------- -------
---
----------------------------在这个示例中，我们获取了一个 DOM 元素，并对其进行了事件监听。当 fullscreenchange 事件触发时，我们可以读取 document.fullscreenElement 属性来确定是哪个元素被切换到了全屏模式。在 fullscreenerror 事件中，我们打印出错误信息以便进行调试。
总结
全屏 API 提供了一种强大的方式来提高网页的体验和交互性。通过学习 Fullscreen API 中的事件，我们可以更好地处理全屏模式下的各种情况。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31543