JavaScript onunload Event

The onunload event in JavaScript is triggered when a webpage or document is about to be unloaded or navigated away from. It allows you to perform certain actions or execute code just before the user leaves the page.

Here’s an example of how to use the onunload event:

window.onunload = function(event) {
  // Perform cleanup or other actions before the page is unloaded
  // This could include saving data, closing connections, etc.
  console.log('Page is being unloaded...');
};

In the example above, we assign a function to the onunload property of the window object. When the user navigates away from the page, closes the browser tab, or refreshes the page, the function is called.

Inside the onunload event handler, you can perform various actions or execute code. This could include cleaning up resources, saving data, closing connections, or any other necessary operations before the page is unloaded.

It’s important to note that the onunload event may not be supported or behave consistently across all browsers. Some browsers may restrict what you can do within the event handler to prevent abuse. Additionally, due to security and privacy considerations, certain actions like displaying a confirmation dialog or preventing the user from leaving the page may not be possible.

To handle the case where the user leaves the page while an asynchronous operation is in progress (e.g., AJAX requests), you can use the beforeunload event instead. The beforeunload event allows you to show a confirmation dialog to the user, asking them to confirm their intention to leave the page.

window.addEventListener('beforeunload', function(event) {
  // Display a confirmation dialog
  event.returnValue = 'Are you sure you want to leave this page?';
});

In the above example, when the user tries to leave the page, a confirmation dialog with the specified message will be shown. The user can choose to stay on the page or proceed with leaving.

Keep in mind that the beforeunload event also has limitations and may not behave consistently across all browsers. It’s recommended to use it sparingly and avoid performing lengthy or resource-intensive operations within the event handler.