fullscreenchange

  • Revision slug: DOM/Mozilla_event_reference/fullscreenchange
  • Revision title: fullscreenchange
  • Revision id: 366659
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment Moved From Mozilla_event_reference/fullscreenchange to DOM/Mozilla_event_reference/fullscreenchange

Revision Content

The fullscreenchange event is fired when the browser is switched to/out-of fullscreen mode.

General info

Specification
Fullscreen
Interface
Event
Bubbles
Yes
Cancelable
No
Target
Document
Default Action
None

Properties

{{OpenEventProperties()}}{{CloseEventProperties()}}

Example

// Note that the API is still vendor-prefixed in browsers implementing it
document.addEventListener("fullscreenchange", function( event ) {

    // The event object doesn't carry information about the fullscreen state of the browser,
    // but it is possible to retrieve it through the fullscreen API
    if ( document.fullscreenEnabled ) {
        
        // The target of the event is always the document,
        // but it is possible to retrieve the fullscreen element through the API
        document.fullscreenElement;
    }

});

See also

Revision Source

<p>The <code>fullscreenchange</code> event is fired when the browser is switched to/out-of fullscreen mode.</p>
<h2 id="General_info">General info</h2>
<dl>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Specification</dt>
  <dd style="margin: 0 0 0 120px;">
    <a class="external" href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Fullscreen</a></dd>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Interface</dt>
  <dd style="margin: 0 0 0 120px;">
    Event</dd>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Bubbles</dt>
  <dd style="margin: 0 0 0 120px;">
    Yes</dd>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Cancelable</dt>
  <dd style="margin: 0 0 0 120px;">
    No</dd>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Target</dt>
  <dd style="margin: 0 0 0 120px;">
    Document</dd>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Default Action</dt>
  <dd style="margin: 0 0 0 120px;">
    None</dd>
</dl>
<h2 id="Properties">Properties</h2>
<p>{{OpenEventProperties()}}{{CloseEventProperties()}}</p>
<h2 id="Example">Example</h2>
<pre class="brush:js;">
// Note that the API is still vendor-prefixed in browsers implementing it
document.addEventListener("fullscreenchange", function( event ) {

    // The event object doesn't carry information about the fullscreen state of the browser,
    // but it is possible to retrieve it through the fullscreen API
    if ( document.fullscreenEnabled ) {
        
        // The target of the event is always the document,
        // but it is possible to retrieve the fullscreen element through the API
        document.fullscreenElement;
    }

});</pre>
<h2 id="Related_Events">Related Events</h2>
<ul>
  <li><a href="/en-US/docs/Mozilla_event_reference/fullscreenerror"><code>fullscreenerror</code></a></li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/DOM/Using_full-screen_mode">Using fullscreen mode</a></li>
</ul>
Revert to this revision