Introduction to JavaScript Window Events
JavaScript Window Events are associated with the windows object defined for describing the events. There are other ways also which can handle the windows event like using and defining within the body tag for the events but that makes the entire code and the event a bit cumbersome to understand and evaluate. Hence using JavaScript Window event is a most conventional and reliable method to represent and manipulate the existing events. It does not follow any public standard as the window object associated with it applies to the events and all the browsers supports for the standard.
Various Window Events in JavaScript
JavaScript supports various types of events and window events as it is one of the part of Events in JavaScript.
JavaScript window are also categorized as follows:
1. Onabort
This is a window event which is used to trigger an id using which the action of loading any document or any resource is aborted. It basically arises when the loading action is performed and it can be any loading event including audio, video, document. In short aborting or killing any active action is being taken care by Onabort JavaScript window event.
Example:
This program demonstrates the JavaScript Window Event where the user tries to load an image and then press escape key to abort the ongoing process of loading image as part of the window event.
Code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function OnAbortImage1 () {
var info = document.getElementById ("info2");
info.innerHTML += "<br />loaded image is aborted.";
RemoveEsc ();
}
function RemoveEsc () {
var esc = document.getElementById ("esc");
esc.parentNode.removeChild (esc);
}
</script>
</head>
<body>
<span id="info2" style="color:red"> Image Loading.</span>
<br /><br />
<span id="esc">Press Escape key to abort.</span>
<br /><br />
<img src="large.bmp" width="200px" height="150px"
onabort="OnAbortImage1 ()">
</body>
</html>Output:
2. Onload
It is used when the page starts to fire and is about to finish loading.
Example:
This program is used to describe the JavaScript window event of Onload.
Code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function OnLoadImage () {
var info = document.getElementById ("info");
info.innerHTML += "<br />The image has been loaded.";
RemoveEsc ();
}
</script>
</head>
<body>
<span id="info" style="color:red"> Image Loading.</span>
<br /><br />
<br /><br />
<img src="large.bmp" width="200px" height="150px"
onload="OnLoadImage ()">
</body>
</html>Output:
3. OnUnload
It is used once a page gets unloaded which means the browser window gets closed.
Example:
This program is used to demonstrate the onunload window event of JavaScript which gets triggered when the window browser tries to get closed.
Code:
<!DOCTYPE html>
<html>
<body onunload="Function A()">
<h1>Welcome to Educba</h1>
<p>To close window or press F5 to reload this page.</p>
<p><strong>Note:</strong> May not work properly as desired due to different window settings </p>
<script>
function Function A() {
alert("Thanks for taking a tour to educba!");
}
</script>
</body>
</html>Output:
4. onafterprint
This function is used to represent the window event where the script gets triggered after once the document gets printed.
Example:
This program is used to represent the onafterprint window event which produces the following output as shown when it gets triggered.
Code:
<!DOCTYPE html>
<html>
<body onafterprint="Function B()">
<h1>Let's print a doc page </h1>
<p><b>Tip:</b> Ctrl+P helps in setting the page for printing .</p>
<p><b>Note:</b> This event is not supported only by opera and safari</p>
<script>
function Function B() {
alert("This document can now get printed");
}
</script>
</body>
</html>Output:
5. onbeforeprint
This JavaScript window event gets triggered before the document gets printed and any functionality is needed to be performed at the time of execution.
Example:
This program is used to represent the window event using onbeforeprint and thus generates the output as shown.
Code:
<!DOCTYPE html>
<html>
<body onbeforeprint="Function B()">
<h1>Lets print a document</h1>
<p><b>Tip:</b> Ctrl+P helps in setting the page </p>
<p><b>Note:</b> The onbeforeprint event is not much compatible with all browsers</p>
<script>
function Function B() {
alert("Print a doc pls!");
}
</script>
</body>
</html>Output:
6. onbeforeunload
This event occurs or can be performed before performing the unloaded event of the JavaScript.
Example:
This program is used to perform onbeforeunload window event.
Code:
<!DOCTYPE html>
<html>
<body onbeforeunload="Function Z()">
<p> press F5 or click on the link below to provoke onbeforeunload event.</p>
<a href="https://www.educba.com">Click on the link to visit educba portal</a>
<script>
function Function z() {
return "Just tryinng to relax and code";
}
</script>
</body>
</html>Output:
7. onerror
It gets triggered when an error occurs at the time loading or execution.
Example:
This program is used to demonstrate the window event which gets triggered when an error occurs at the time of loading.
Code:
<!DOCTYPE html>
<html>
<body>
<img src="image.gif" onerror="Function K()">
<p>function gets triggered if any error causes while loading image. it gets visible with an alert box with a text. we refer to an image that does not exist, therefore the onerror event occurs.</p>
<script>
function Function K() {
alert("Image cannot be loaded");
}
</script>
</body>
</html>Output:
8. onhashchange
It gets triggered when there is a change in the anchor tag while moving from an anchor tag to any URL or vice-versa.
Example:
This program illustrates the JavaScript event which triggers onhashchange for moving from anchor tag to URL.
Code:
<!DOCTYPE html>
<html>
<body onhashchange="Function D()">
<p>Click button for changing anchor part of the current URL next segment *3</p>
<button onclick="nextSegment()">Try next</button>
<p id="demo1"></p>
<script>
function nextSegement() {
location.hash = "segment *3";
var x = "Anchor part is now: " + location.hash;
document.getElementById("demo1").innerHTML = x;
}
function Function D() {
alert("Anchor part has changed!");
}
</script>
</body>
</html>Output:
9. onresize
This window event is used when sometimes there is a transformation in the size of the browser.
Example:
This program is used to represent the onresize window event of JavaScript.
Code:
<!DOCTYPE html>
<html>
<body onresize="Function Y()">
<p>Resize this browser window.</p>
<script>
function myFunction() {
alert("change size of browser window!");
}
</script>
</body>
</html>Output:
10. ononline/onoffline
It is used when the browser gets online or the browser gets in offline mode respectively.
Example:
This program represents the window event which is used to make the browser to check-in online or offline mode as shown.
Code:
<!DOCTYPE html>
<html>
<body ononline="onFunction t()" onoffline="offFunction s()">
<p>Open File and click "Work Offline" to switch between online and offline.</p>
<p><strong>Note:</strong> The ononline and onoffline events happen only in Firefox and Internet Explorer.</p>
<script>
function onFunction t() {
alert ("Browser works online.");
}
function offFunction s() {
alert ("Browser works offline.");
}
</script>
</body>
</html>Output:
Conclusion
JavaScript Window Events plays a very pivotal role in performing the window events with respect to window object as it is used as a substitute for events to be performed by the body of the HTML file. Overall the usage of <body> makes the events bit cumbersome which gets easy to handle.