--- title: 'Element: fullscreenchange イベント' slug: Web/API/Element/fullscreenchange_event tags: - API - Fullscreen API - Fullscreen events - events - fullscreen - fullscreenchange - イベント - 全画面 API - 全画面イベント translation_of: Web/API/Element/fullscreenchange_event ---
{{APIRef}}

fullscreenchange イベントは、ある要素 ({{domxref("Element")}}) が全画面モードに切り替わったり、終了したりした直後に発生します。

バブリング あり
キャンセル 不可
インターフェイス {{domxref("Event")}}
イベントハンドラープロパティ {{domxref("Element.onfullscreenchange", "onfullscreenchange")}}

このイベントは、全画面モードへ移行または終了する要素 (Element) へ送られます。

例

この例では、 fullscreenchange イベントのハンドラーは、 ID が fullscreen-div である要素に追加されます。

ユーザーが "Toggle Fullscreen Mode" ボタンをクリックすると、 click ハンドラーが div の全画面モードを切り替えます。もし document.fullscreenElement に値があれば、全画面モードを終了します。そうでなければ、 div は全画面モードに移行します。

fullscreenchange イベントが処理されたとき、要素の状態はすでに変化していることを思い出してください。よって、全画面モードへ変化した場合は、 document.fullscreenElement が全画面モードになった要素を指します。一方、 document.fullscreenElement が null の場合は、全画面モードが取り消されています。

すなわち、この例のコードでは、要素が現在全画面モードである場合、 fullscreenchange ハンドラーはコンソールへ全画面の要素の id をログ出力します。 document.fullscreenElement が null の場合は、このコードは全画面モードが終了した旨をログ出力します。

HTML

 <h1>fullscreenchange event example</h1>
 <div id="fullscreen-div">
   <button id="toggle-fullscreen">Toggle Fullscreen Mode</button>
 </div>

JavaScript

document.getElementById('fullscreen-div').addEventListener('fullscreenchange', (event) => {
  // document.fullscreenElement will point to the element that
  // is in fullscreen mode if there is one. If not, the value
  // of the property is null.
  if (document.fullscreenElement) {
    console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
  } else {
    console.log('Leaving full-screen mode.');
  }
});

document.getElementById('toggle-fullscreen').addEventListener('click', (event) => {
  if (document.fullscreenElement) {
    // exitFullscreen is only available on the Document object.
    document.exitFullscreen();
  } else {
    document.getElementById('fullscreen-div').requestFullscreen();
  }
});

仕様書

仕様書 状態
Fullscreen API Living Standard

ブラウザーの互換性

{{Compat("api.Element.fullscreenchange_event")}}

関連情報