The onbeforeunload Event is triggered immediately prior to the unloading of a document. It prompts a confirmation dialogue box that presents a message asking the user to either remain on the current page or proceed to the next page using the specified link. This event allows you to inquire if the user prefers to continue on the existing page.
To put it differently, any hyperlink that directs you to a different page, whether it be a text link, an image link, or another variety of link, activates the onbeforeunload Event. When users select "OK" in the confirmation dialog, they are taken to the subsequent page, while clicking "Cancel" allows them to remain on the current page. It is not feasible to modify the message displayed in the dialog box.
Syntax
The onbeforeunload Event incorporates various tags and functions.
- The onbeforeunload attribute in HTML:
- The onbeforeunload property in JavaScript:
- The onbeforeunload property In JavaScript, utilizing the addEventListener function:
<element onbeforeunload = "myValues">
Object_name.onbeforeunload = function(){myValues};
Object_name.addEventListener("beforeunload", myValues);
Explanation
When you attempt to navigate away from a webpage that has an active beforeunload event listener, the beforeunload event will trigger a confirmation dialog box. This box prompts you to confirm whether you truly wish to leave the page.
If you continue, the web browser will take you to the new page. On the other hand, if you choose not to proceed, the navigation will be halted.
According to the specifications, the confirmation dialog needs to be shown by calling the preventDefault method inside the beforeunload event handler.
- The onbeforeunload property in JavaScript without windows:
addEventListener('beforeunload',(event) => {
event.preventDefault();
});
Explanation
Historically, various web browsers provided the functionality to display a custom message in the confirmation dialogue. This feature was intended to alert users that their data might be lost if they chose to leave the current page. However, this capability has been misused for deceptive practices by some users. Consequently, custom messages are no longer permitted.
As per the specifications set forth for JavaScript, the beforeunload event handler disregards the functionalities of the confirm, alert, and prompt methods.
Examples
The subsequent examples demonstrate the usage of the onbeforeunload property in relation to the link.
Example 1
The onbeforeunload property operates within the window context to trigger a confirmation dialog box. In this instance, we utilize fundamental events alongside HTML elements.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> The JavaScript onbeforeunload Event </title>
</head>
<body onbeforeunload="return myEvents()">
<h2> The JavaScript onbeforeunload Event </h2>
<p> Use the HTML and Javascript to work with an "onbeforeunload" event to the window object. </p>
<p> press F5 or click on the given link to activate the onbeforeunload Event and Close this window. </p>
<a href = "https://logic-practice.com/"> Click this link to go to logic-practice.com </a>
<script>
window.addEventListener("beforeunload", function(event) {
event.returnValue = "Write something to get data here..";
});
function myEvents() {
return "Write something to get data here...";
}
</script>
</body>
</html>
Output
The image provided below illustrates the onbeforeunload Event along with the confirmed values.
Output1
First time click on the link
Output2
Second time click on the link
Example 2
The onbeforeunload property is utilized by the window object to trigger a confirmation dialog box. In this instance, we are employing fundamental Events alongside the associated data.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> The JavaScript onbeforeunload Event </title>
</head>
<body>
<h2> The JavaScript window.onbeforeunload Event </h2>
<p> Use the HTML and Javascript to work with an "onbeforeunload" event with the window. onbeforeunload object. </p>
<p> press F5 or click on the given link to activate the onbeforeunload Event and Close this window. </p>
<a href = "https://logic-practice.com/">Click this link to go to logic-practice.com</a>
<script>
window.onbeforeunload = function(event) {
event.returnValue = "Write something to get data here..";
};
</script>
</body>
</html>
Output
The image provided below illustrates the onbeforeunload event along with the confirmed values.
Example 3
The onbeforeunload property is utilized by the window object to display a confirmation dialog. In this instance, we employ a basic event listener within the windows.addEventListener property alongside a function designed to capture the link.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> The JavaScript onbeforeunload Event </title>
</head>
<body>
<h2> The JavaScript onbeforeunload Function </h2>
<p> Use the HTML and Javascript to work with an "onbeforeunload" event to the window object. </p>
<p> press F5 or click on the given link to activate the onbeforeunload Event and Close this window. </p>
<a href = "https://logic-practice.com/"> Click this link to go to logic-practice.com </a>
<script>
window.addEventListener("beforeunload", function(event) {
event.returnValue = "Write something to get data here..";
});
</script>
</body>
</html>
Output
The image provided below illustrates the onbeforeunload event along with the confirmed values.
Example 4
The onbeforeunload property operates independently of windows and triggers a confirmation dialog box. In this context, we implement a fundamental Event within the addEventListener property for the webpage.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> The JavaScript onbeforeunload Event </title>
</head>
<body>
<h2> The JavaScript onbeforeunload Event using the addEventListener </h2>
<p> press F5 or click on the given link to activate the onbeforeunload Event and Close this window. </p>
<a href = "https://logic-practice.com/"> Click this link to go to logic-practice.com </a>
<script>
addEventListener("beforeunload", function(event) {
event.returnValue = "Write something to get data here..";
});
</script>
</body>
</html>
Output
The image presented below illustrates the onbeforeunload event in the absence of windows.
Example 5
The onbeforeunload property functions independently of the window and triggers a confirmation dialog. In this instance, we utilize the Event object for the webpage along with the associated data.
<!DOCTYPE html>
<html>
<body>
<h2> The JavaScript onbeforeunload function without windows </h2>
<p> press F5 or click on the given link to activate the onbeforeunload Event and Close this window. </p>
<a href = "https://logic-practice.com/"> Click this link to go to logic-practice.com </a>
<script>
onbeforeunload = function(event) {
event.returnValue = "Write something to get data here..";
};
</script>
</body>
</html>
Output
The image provided below illustrates the onbeforeunload event in the absence of window parameters.
Web Browsers Supported
The following browsers and its version supported the onbeforeunload Event.
- Google Chrome 1
- Edge version 12
- Firefox 1
- Safari version 3
- Opera version 12
Conclusion
The JavaScript onbeforeunload event is triggered when a user attempts to navigate away from the current page or link, prompting a confirmation dialog. This event facilitates the loading of a web page or window by utilizing the event object, allowing developers to manage the navigation process effectively. It serves as a precautionary measure prior to loading a new web page, ensuring that users have the opportunity to confirm their intention before proceeding to the next page.