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

一、屬性

① document.fullscreen 判斷當(dāng)前文檔是否全屏顯示內(nèi)容，已棄用，不建議使用

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

二、方法

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

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

三、事件

①  fullscreenchange事件，瀏覽器進(jìn)入或者離開全屏?xí)r觸發(fā)

②  fullscreenerror事件，瀏覽器切換全屏狀態(tài)報錯回調(diào)

由于兼容問題, 需要加兼容前綴,例如webkit內(nèi)核瀏覽器:  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;

??}

六、事件監(jiān)聽

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

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

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

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

七、event對象

標(biāo)準(zhǔn)事件函數(shù)默認(rèn)的第一個參數(shù)

是描述發(fā)生事件的詳細(xì)信息

八、阻止默認(rèn)事件

1.事件默認(rèn)行為：當(dāng)一個事件發(fā)生的時候瀏覽器自己會默認(rèn)做的事情

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

3.e.preventDefault( ) 阻止默認(rèn)行為，且解決在IOS上有網(wǎng)頁回彈的橡皮筋現(xiàn)象

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

九、阻止冒泡

在需要的時候的，標(biāo)準(zhǔn)用e.stopPropagation( ) 阻止冒泡問題，

配合capture使用，阻止冒泡

十、獲取手指對象

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

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

changedTouches 觸發(fā)當(dāng)前事件的手指列表

獲取手指的個數(shù) e.changedTouches.length

獲取坐標(biāo) e.changedTouches[0].pageX

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