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.