fullscreenchange
16 March, 2023
0
0
0
Contributors
The fullscreenchange event is a browser event that is fired whenever the fullscreen state of a document or an element changes. This event is useful when you want to detect when an element enters or exits fullscreen mode, or when you want to perform certain actions based on the current fullscreen state.
The fullscreenchange event is triggered on the document object when the fullscreen state of the entire document changes, and it is also triggered on the element that is currently in fullscreen mode when that element's fullscreen state changes. This event can be used in conjunction with the document.fullscreenElement property to determine which element is currently in fullscreen mode, or to perform certain actions based on whether the document is in fullscreen mode or not.
When the fullscreenchange event is fired, you can access information about the fullscreen state by using properties of the event object, such as event.target to get the element that triggered the event, or document.fullscreenElement to get the element that is currently in fullscreen mode (if any). You can then use this information to update your UI, perform certain actions, or respond to the user's interactions with your application.
Event listener
You can add a fullscreenchange event listener to an element using like this:
HTML
<div id="myDiv">
<img src="my-image.jpg" alt="My Image">
</div>JavaScript
const myDiv = document.getElementById('myDiv');
myDiv.addEventListener('fullscreenchange', function(event) {
if (document.fullscreenElement) {
console.log('Element entered full-screen mode');
} else {
console.log('Element exited full-screen mode');
}
});
function enterFullScreen() {
myDiv.requestFullscreen();
}
function exitFullScreen() {
document.exitFullscreen();
}Here, we retrieve a div element using its ID and then add a fullscreenchange event listener to it using the addEventListener method. When the element enters or exits full-screen mode, the callback function passed to addEventListener will be executed, and a message will be logged to the console.
We also define two functions enterFullScreen() and exitFullScreen(), which can be called to enter or exit full-screen mode on the div element using the requestFullscreen() and exitFullscreen() methods, respectively.
Note that the requestFullscreen() and exitFullscreen() methods are not supported in some older browsers, so you may need to use vendor-prefixed methods or fallback techniques to provide full-screen functionality in those browsers.
It's also worth noting that the fullscreenchange event is not supported in some older browsers, such as Internet Explorer 10 and earlier. In those browsers, you can use the vendor-specific msfullscreenchange, mozfullscreenchange, webkitfullscreenchange, or ofullscreenchange events instead.
Property
Here's an example of using the onfullscreenchange property with a function assigned to it:
const elem = document.getElementById('my-element');
elem.onfullscreenchange = function(event) {
if (document.fullscreenElement) {
console.log('Element is now in fullscreen mode');
} else {
console.log('Element has exited fullscreen mode');
}
}Here, we are assigning a function to the onfullscreenchange property of an element with the id of my-element. The function will be called whenever the element enters or exits fullscreen mode.
Inside the function, we check if the document.fullscreenElement property is truthy. If it is, that means the element is in fullscreen mode. Otherwise, it has exited fullscreen mode.
Inline
You can use the onfullscreenchange attribute inline in HTML, like so:
HTML
<div onfullscreenchange="handleFullscreenChange(event)">
Click me to go fullscreen!
</div>JavaScript
function handleFullscreenChange(event) {
const elem = event.target;
if (document.fullscreenElement === elem) {
console.log('Element is now in fullscreen mode');
} else {
console.log('Element has exited fullscreen mode');
}
}
const elem = document.querySelector('div');
elem.onclick = function() {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
elem.requestFullscreen();
}
}Here, we're adding the onfullscreenchange attribute to a div element and setting it to call a handleFullscreenChange function when the event is fired. We've defined the handleFullscreenChange function in a script tag.
We've also added an onclick event handler to the div element to toggle fullscreen mode on and off, just like in the previous example.
Inline event handlers are a less recommended approach for event handling, as they can make the code harder to read and maintain. It's generally better to separate the event handling logic from the HTML markup and define the event listener function in a separate JavaScript file or script block.
Programmatic trigger
There is no fullscreenchange() method. The fullscreenchange event is a DOM event that fires when an element enters or exits full-screen mode. However, you can use the dispatchEvent() method to programmatically trigger the fullscreenchange event on an element:
const elem = document.getElementById('my-element');
// Simulate entering fullscreen mode
document.documentElement.requestFullscreen();
// Dispatch fullscreenchange event
elem.dispatchEvent(new Event('fullscreenchange'));
// Simulate exiting fullscreen mode
document.exitFullscreen();
// Dispatch fullscreenchange event again
elem.dispatchEvent(new Event('fullscreenchange'));Here, we're first getting a reference to an element with the id of my-element. We then simulate entering fullscreen mode by calling document.documentElement.requestFullscreen(). This will cause the fullscreenchange event to be fired automatically, but we can also trigger it manually by calling dispatchEvent() on the elem element.
We then simulate exiting fullscreen mode by calling document.exitFullscreen() and dispatch the fullscreenchange event again.
Note that while you can manually trigger the fullscreenchange event, it's generally not necessary to do so in most cases. The event is automatically fired by the browser whenever an element enters or exits fullscreen mode.
javascript
javascriptevent
fullscreen