JavaScript原生事件：全屏、拖拽、可变大小容器知多少？JavaScript 的原生事件了解多少呢？播放视频的全屏

「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」

前言

做前端开发这么久，你对 JavaScript 的原生事件了解多少呢？播放视频的全屏/退出全屏、文件的拖拽上传、可调整宽度高度的容器、调整左右容器宽度等功能是怎么实现的呢？下面我就针对上述的几个功能做一个简单的介绍，不足之处还望指出。
相关源码 detanx github

全屏/退出全屏

一些情况下，由于页面内容较多，我们只想看某一部分的内容时，我们就可以给该部分添加一个全屏的按钮，只显示该部分的内容。
注：全屏的事件是在 document.documentElement 对象上，而退出全屏的事件是在 document 对象上。

设置不同状态下的样式（不限于宽高）时，我们可以通过修改不同的 class 来控制，在 Vue 、 React 等中我们也可以控制变量来改变元素在不同状态下的 class 。
如何记住这几个事件名：
1. 全屏事件
  来源：document.documentElement；
  方法名称：标准方法 -: requestFullscreen，其他方法 -: 大写标准方法requestFullscreen 的第一个字母并加前缀（webkit、moz、ms）。
2. 退出全屏事件
  来源：document；
  方法名称：标准方法 -: exitFullscreen，IE -: 大写标准方法 exitFullscreen 的第一个字母并加前缀 ms；Chrome（ webkit ）、Firefox（ moz ）-: 使用 CancelFullScreen 加相应内核前缀。

文件拖拽上传

文件上传在很多地方都会用到，一半会是点击某个按钮或者区域去选择文件上传，但也有地方会使用拖拽文件上传的方式，或者两者都有既可以点击也可以拖到指定区域。

拖拽事件

在文件拖拽上传中，我们会用到 ondragover、ondragenter、ondragleave、ondrop 这几个事件。

具体实现

创建接受文件的拖拽区域及读取文件进度条

2. 对网页监听拖拽事件并显示相应的文件需要被拖到的区域，如果拖拽的区域一直是显示的，可以直接将事件绑到对应的区域元素上。

3. 当拖拽文件已经进入拖拽区域时会触发 ondragenter。 4. 当拖拽文件离开拖拽区域时会触发 ondragleave。 5. 当拖拽文件在拖拽区域松开鼠标，会触发 ondrop 事件，当拖拽的文件不是一些无法读取的内容（例：文件夹等）时，我们可以通过内置的 FileReader 对象处理，通过 FileReader 实例的一些方法，我们可以做一些自己的处理。

拖拽改变 `div` 大小

在某些项目中，可能会有这样的需求，页面有一个容器我们可以按住容器边缘，拖动鼠标可以改变容器的高度（类似于 textarea 标签的 resize 属性）；当然我们肯定不止这么简单的功能，当页面存在左右两个 div 时，我们可以拖动两个 div 中间，使得两个 div 的宽度一个增加另一个减少，但始终保持总的宽度不变。