在現代瀏覽器中都內置有大量的事件處理器。這些處理器會監視特定的條件或用戶行為，例如鼠標單擊或瀏覽器窗口中完成加載某個圖像。通過使用客戶端的 JavaScript，可以將某些特定的事件處理器作為屬性添加給特定的標簽，并可以在事件發生時執行一個或多個 JavaScript 命令或函數。HTML5 規范允許用戶自定義網頁上的任意元素全屏顯示，也就是所謂的HTML全屏事件。但是因為瀏覽器廠商原因，各瀏覽器存在差異。下面我們就來詳細看看HTML全屏事件。

一、屬性

① document.fullscreen 判斷當前文檔是否全屏顯示內容，已棄用，不建議使用

② document.fullscreenElement 當前文檔正以全屏模式顯示的Element節點,如果沒有全屏模式，則返回null，可以用于替代上面的屬性

二、方法

③ Element.requestFullscreen() 請求瀏覽器（user agent）將特定元素（甚至延伸到它的后代元素）置為全屏模式，隱去屏幕上的瀏覽器所有 UI 元素，以及其它應用。返回一個 Promise，并會在全屏模式被激活的時候變成 resolved 狀態。

④ Document.exitFullscreen() 用于請求從全屏模式切換到窗口模式，會返回一個 Promise，會在全屏模式完全關閉的時候被置為resolved 狀態。

三、事件

①  fullscreenchange事件，瀏覽器進入或者離開全屏時觸發

②  fullscreenerror事件，瀏覽器切換全屏狀態報錯回調

由于兼容問題, 需要加兼容前綴,例如webkit內核瀏覽器:  webkitRequestFullScreen

四、輪子

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)

});

五、全屏偽類選擇器    

:full-screen .box{}

:webkit-full-screen .box{}

????#dv:fullscreen {

??????text-align: center;

??????vertical-align: middle;

??????display: flex;

??????align-items: center;

??????justify-content: center;

??}

六、事件監聽

1.addEventListener(‘不帶on的事件名’,事件函數，是否冒泡 )事件綁定

2.綁定多少個事件就執行多少個，不會存在前后事件覆蓋的問題

3.冒泡 從下往上，把事件一直向上傳遞，點擊最下面的元素，最下面先執行

4.捕獲 從上往下，把事件一直向下傳遞，點擊最上面的元素，最上面先執行

七、event對象

標準事件函數默認的第一個參數

是描述發生事件的詳細信息

八、阻止默認事件

1.事件默認行為：當一個事件發生的時候瀏覽器自己會默認做的事情

2.比如正常情況下，鼠標可以拖拽圖片，a標簽跳轉，手指長按可以選中文字，右鍵菜單等

3.e.preventDefault( ) 阻止默認行為，且解決在IOS上有網頁回彈的橡皮筋現象

4.選中文本use-select: none; 阻止選擇

九、阻止冒泡

在需要的時候的，標準用e.stopPropagation( ) 阻止冒泡問題，

配合capture使用，阻止冒泡

十、獲取手指對象

touches 當前屏幕上的手指列表(所有觸點的集合)

targetTouches 當前元素上的手指列表(觸發事件元素上的觸點集合)

changedTouches 觸發當前事件的手指列表

獲取手指的個數 e.changedTouches.length

獲取坐標 e.changedTouches[0].pageX

以上就是HTML全屏事件涉及到的全部內容，由于內容過于冗雜我們一時間很難掌握，我們可以結合本站的HTML教程加以理解，深入探究HTML全屏事件的工作原理和機制。