pageshow

About

The pageshow event is triggered when a page is shown or reloaded. This event is similar to the load event, but it is also triggered when a page is restored from a cached state or when a user navigates back to the page using the browser's history feature. The pageshow event can be used to execute JavaScript code or perform other actions when a page is shown or reloaded, such as updating the content of the page or resetting form fields.

Event listener

To handle the pageshow event, you can use the addEventListener() method to attach a function to the pageshow event of the window object. Here's an example:

Here, we're using the addEventListener() method to attach an anonymous function to the pageshow event of the window object. When the pageshow event is triggered, the function will be executed, and the event parameter will contain information about the event, such as the type of event and the target element.

It's worth noting that the pageshow event is not supported by all browsers, particularly older browsers. If you need to support older browsers, you may need to use alternative methods to handle page reloading, such as the unload event and the sessionStorage object.

Property

There is an onpageshow property that can be used to handle the pageshow event. The onpageshow property is similar to other on properties, such as onclick and onload, and allows you to attach a function directly to the pageshow event of an element:

Here, we're using the onpageshow property to attach an anonymous function to the pageshow event of the window object. When the pageshow event is triggered, the function will be executed, and the event parameter will contain information about the event, such as the type of event and the target element.

It's important to note that if you use the onpageshow property to handle the pageshow event, it will replace any previously attached event listeners for that event. If you need to attach multiple functions to the pageshow event, you should use the addEventListener() method instead.

Inline

You can also use the onpageshow attribute inline in HTML to handle the pageshow event

Here, we're using the onpageshow attribute to attach the myFunction() function to the pageshow event of the body element. When the pageshow event is triggered on the body element, the myFunction() function will be executed, and the event parameter will contain information about the event, such as the type of event and the target element.

It's worth noting that using inline event handlers like this can make your code harder to read and maintain, especially if you have multiple event handlers on the same element. It's generally better to use the addEventListener() method to attach event listeners in JavaScript code, rather than using inline event handlers.

Programmatic trigger

The pageshow event cannot be triggered programmatically using a pageshow() method. The pageshow event is a browser event that is triggered automatically when a page is shown or reloaded.

You can, however, use the dispatchEvent() method to simulate a triggered pageshow event on an element, just like any other event:

Here, we're creating a new pageshow event using the Event() constructor and passing in the event type as a string. We're then using the dispatchEvent() method to trigger the pageshow event on the window object.

It's worth noting that triggering a pageshow event in this way won't actually cause the page to be shown or reloaded - it will simply trigger any event listeners that have been registered for the pageshow event. To actually show or reload the page, you would need to use other methods, such as reloading the page or navigating to it from a different page.