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

一、屬性

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

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

二、方法

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

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

三、事件

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

②  fullscreenerror事件，瀏覽器切換全屏狀態(tài)報(bào)錯(cuò)回調(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.綁定多少個(gè)事件就執(zhí)行多少個(gè)，不會(huì)存在前后事件覆蓋的問題

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

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

七、event對(duì)象

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

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

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

1.事件默認(rèn)行為：當(dāng)一個(gè)事件發(fā)生的時(shí)候?yàn)g覽器自己會(huì)默認(rèn)做的事情

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

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

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

九、阻止冒泡

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

配合capture使用，阻止冒泡

十、獲取手指對(duì)象

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

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

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

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

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

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