事件退出全屏 - JavaScript

在网页开发中，全屏模式是一种广泛使用的用户体验优化技术。在全屏模式下，内容可以完全占据屏幕空间，最大化展示页面的信息，提升用户体验。然而，有时候用户需要退出全屏模式，这时候就需要对全屏模式进行退出操作。

在 JavaScript 中，可以使用 FullScreen API 来实现全屏模式和退出全屏模式。全屏模式可以通过调用特定的函数进入全屏模式，退出全屏模式需要调用 FullScreen API 提供的一个事件来实现。

FullScreen API

FullScreen API 是一个实验中的 API，它提供了一些方法和属性来实现全屏模式。以前，网页开发者往往使用特定的技巧来实现全屏模式。但是现在，通过 FullScreen API 就可以比较容易地实现全屏模式了。

• document.fullscreenElement: 一个只读属性，返回当前处于全屏状态的元素，如果当前没有全屏状态，该属性返回 null。
• document.fullscreenEnabled：一个只读属性，返回 Boolean 值，表示 FullScreen API 是否可用。
• element.requestFullscreen(): 这个方法用于将指定的元素进入全屏状态。
• document.exitFullscreen(): 这个方法用于将当前处于全屏状态的元素退出全屏状态。

事件退出全屏的实现

下面是一个代码片段，它演示了如何退出全屏模式。具体实现步骤如下：

1. 首先需要将 FullScreen API 中的事件添加到已进入全屏模式的元素中。需要使用 addEventListener() 函数，将 fullscreenchange 事件添加到全屏模式元素中。
2. 在 fullscreenchange 事件的回调函数中，检查是否处于全屏模式，如果不是，则退出全屏模式，使用 document.exitFullscreen() 函数退出全屏模式。

以下是实现代码：

// 获取进入全屏模式的元素
var elem = document.documentElement;

// 当前元素进入全屏模式
elem.requestFullscreen().then(function() {
  console.log('进入全屏模式成功！');
});

// 为全屏模式添加事件，以检测何时退出全屏
elem.addEventListener('fullscreenchange', function() {
  if (!document.fullscreenElement) {
    console.log('退出全屏模式成功！');
  }
});

在这个代码中，我们首先使用 document.documentElement 来获取文档的根元素，这个元素将被用于进入全屏模式。接着，调用 requestFullscreen() 方法，将进入全屏模式。

在 requestFullscreen() 方法中，可以使用 then() 函数来监听方法的完成事件。当 requestFullscreen() 方法执行完毕时，可以通过回调函数来检测是否成功地进入了全屏模式。如果成功，将会输出一条提示信息。

接下来，我们为全屏模式元素添加了一个 fullscreenchange 事件，以便在退出全屏模式时进行处理。在回调函数中，我们可以调用 document.fullscreenElement 来检查是否还处于全屏模式，如果不是，则使用 document.exitFullscreen() 方法退出全屏模式。在退出全屏模式时，将会输出另一条提示信息。

总结

以上是实现 JavaScript 中事件退出全屏模式的方法。通过 FullScreen API 我们可以非常方便地实现全屏模式相关的操作。在实现全屏模式时，您可以根据具体需要加入其他的逻辑。