pagehide

About

The pagehide event is triggered when a user navigates away from a page, either by closing the window or tab, or by navigating to a new page. The pagehide event is part of the Page Visibility API, which allows developers to detect when a page is visible or hidden to the user.

The pagehide event is useful for performing cleanup tasks or saving data when a user navigates away from a page. For example, if your application is a form that collects user input, you may want to save the user's progress periodically as they fill out the form. You can use the pagehide event to detect when the user is about to leave the page, and save their progress to a database or local storage.

Event listener

To handle the pagehide event, you can use the addEventListener() method to add an event listener to the window object:

Here, we're adding an event listener to the window object for the pagehide event. When the user navigates away from the page, the anonymous function will be called, and any cleanup tasks or data saving operations can be performed inside the function. The pagehide event can be a powerful tool for improving the user experience and enhancing the functionality of your applications.

Property

There is an onpagehide property, which can also be used to attach a function to the pagehide event:

Here, we're attaching an anonymous function to the onpagehide property of the window object. This function will be called when the pagehide event is triggered, allowing us to perform any necessary cleanup tasks or data saving operations.

Inline

You can also use the onpagehide property inline in HTML:

Here, we're using the onpagehide property to attach the myFunction() function to the pagehide event of the body element. When the user navigates away from the page, the pagehide event will be triggered, and the myFunction() function will be called.

While using the onpagehide attribute inline is a valid way to handle the pagehide event, it's generally recommended to use the addEventListener() method instead. Using the addEventListener() method allows you to separate your JavaScript code from your HTML markup, which can make your code more organized and easier to maintain. Additionally, using the addEventListener() method can help prevent conflicts with other scripts that may be using the onpagehide property.

Programmatic trigger

There is no built-in pagehide() method that can be used to programmatically trigger the pagehide event. The pagehide event is triggered by the browser when the user navigates away from a page or closes the window or tab, and it cannot be triggered directly.

Instead, you can use the dispatchEvent() method to programmatically trigger the pagehide event:

Here, we're creating a new pagehide event using the Event() constructor and storing it in the pageHideEvent variable. We then dispatch the event to the window object using the dispatchEvent() method, which triggers the pagehide event and executes any event listeners that have been attached to it.

Programmatically triggering the pagehide event can be useful in certain scenarios, such as when you need to simulate a user navigating away from a page for testing purposes. However, it's important to note that triggering the pagehide event programmatically will not actually close the window or tab or navigate to a new page, as it would if triggered by a user action. It will only execute the event listener functions that have been attached to the pagehide event.