现代浏览器中内置的大量的事件处理器会监视特定的条件或用户行为，例如鼠标单击或浏览器窗口中完成加载某个图像。通过使用客户端的 JavaScript，可以将某些特定的事件处理器作为属性添加给特定的标签，并可以在事件发生时执行一个或多个 JavaScript 命令或函数。HTML5 规范允许用户自定义网页上的任意元素全屏显示，也就是所谓的HTML全屏事件。下面我们来全面解析一下HTML全屏事件，深入了解其中的原理。

1.属性

① document.fullscreen 判断当前文档是否全屏显示内容，已弃用，不建议使用

② document.fullscreenElement 当前文档正以全屏模式显示的Element节点,如果没有全屏模式，则返回null，可以用于替代上面的属性

2.方法

① Element.requestFullscreen() 请求浏览器（user agent）将特定元素（甚至延伸到它的后代元素）置为全屏模式，隐去屏幕上的浏览器所有 UI 元素，以及其它应用。返回一个 Promise，并会在全屏模式被激活的时候变成 resolved 状态。

② Document.exitFullscreen() 用于请求从全屏模式切换到窗口模式，会返回一个 Promise，会在全屏模式完全关闭的时候被置为resolved 状态。

3.事件

① fullscreenchange事件，浏览器进入或者离开全屏时触发

② fullscreenerror事件，浏览器切换全屏状态报错回调

由于兼容问题, 需要加兼容前缀,例如webkit内核浏览器:  webkitRequestFullScreen

4.轮子

import fscreen from './node_modules/fscreen/src/index.js';
console.log(fscreen.fullscreenEnabled);
console.log(fscreen.fullscreenElement);
if (fscreen.fullscreenEnabled) {
    document.addEventListener('keydown', function (e) {
        if (e.keyCode == 13) {
            if (!fscreen.fullscreenElement) {
                fscreen.requestFullscreen(dv);
            } else {
                fscreen.exitFullscreen();
            }
        }
    });
}
fscreen.addEventListener('fullscreenchange', function (e) {
    console.log(e);
    console.log(fscreen.fullscreenElement)
});

5.全屏伪类选择器    

:full-screen .box{}
:webkit-full-screen .box{}
   #dv:fullscreen {
      text-align: center;
      vertical-align: middle;
      display: flex;
      align-items: center;
      justify-content: center;
  }

6.事件监听

• addEventListener(‘不带on的事件名’,事件函数，是否冒泡 )事件绑定
• 绑定多少个事件就执行多少个，不会存在前后事件覆盖的问题
• 冒泡 从下往上，把事件一直向上传递，点击最下面的元素，最下面先执行
• 捕获 从上往下，把事件一直向下传递，点击最上面的元素，最上面先执行

7.event对象

标准事件函数默认的第一个参数

是描述发生事件的详细信息

8.阻止默认事件

• 事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情
• 比如正常情况下，鼠标可以拖拽图片，a标签跳转，手指长按可以选中文字，右键菜单等
• e.preventDefault( ) 阻止默认行为，且解决在IOS上有网页回弹的橡皮筋现象
• 选中文本use-select: none; 阻止选择

9.阻止冒泡

在需要的时候的，标准用e.stopPropagation( ) 阻止冒泡问题，

配合capture使用，阻止冒泡

10.获取手指对象

touches 当前屏幕上的手指列表(所有触点的集合)

targetTouches 当前元素上的手指列表(触发事件元素上的触点集合)

changedTouches 触发当前事件的手指列表

获取手指的个数 e.changedTouches.length

获取坐标 e.changedTouches[0].pageX

以上就是HTML全屏事件涉及到的全部内容，由于内容过于冗杂我们一时间很难掌握，我们可以结合本站的HTML视频教程加以理解，深入探究HTML全屏事件的工作原理和机制，彻底掌握HTML事件的使用。