5.2 事件監聽

直接修改 fullscreen.html 即可。

練習：進入/退出 全螢幕時，事件觸發

針對 document 物件，綁定 fullscreenchange 事件，當 進入/退出 全螢幕時，觸發 fullscreenchange 事件。

例：

window.addEventListener("load", function(){
  
  // ... 這邊是原來的程式碼 ...
  
  
  document.addEventListener("fullscreenchange", function(e){
    // 事件觸發相關程式寫在這裡，可透過 document.fullscreenElement 來判斷
    //console.log("fullscreenchange 事件觸發");
    //console.log(document.fullscreenElement);
    
    if(document.fullscreenElement){
      console.log("進入全螢幕模式");
    }else{
      console.log("退出全螢幕模式");
    }
    
  });

});

注意事項：全螢幕模式需由使用者來觸發

因為全螢幕模式必需是反應在使用者的行為上(例如點擊某個按鈕)。所以如果是在載入頁面時，直接想要進入全螢幕模式的話，就會報錯。例：

window.addEventListener("load", function(){
  
  // ... 這邊是原來的程式碼 ...
    
  var element_html = document.getElementById("the_html");
  element_html.requestFullscreen();

});

Console 會出現如下的錯誤訊息：