The visibilitychange
event is fired at the document when the content of its tab have become visible or have been hidden.
Bubbles | Yes |
---|---|
Cancelable | No |
Interface | Event |
Event handler property | onvisibilitychange |
Usage notes
The event doesn't include the document's updated visibility status, but you can get that information from the document's visibilityState
property.
Examples
This example begins playing a music track when the document becomes visible, and pauses the music when the document is no longer visible.
document.addEventListener("visibilitychange", function() { if (document.visibilityState === 'visible') { backgroundMusic.play(); } else { backgroundMusic.pause(); } });
Specifications
Specification | Status | Comment |
---|---|---|
Page Visibility (Second Edition) The definition of 'visibilitychange' in that specification. |
Recommendation |
Browser compatibility
No compatibility data found. Please contribute data for "api.Document.visibilitychange" (depth: 1) to the MDN compatibility data repository.