The onload event in JavaScript is used to trigger a specific action or code when an object, such as a webpage or an image, has finished loading. It is commonly used with the <body> element in HTML to execute JavaScript code once the entire web page has been loaded by the browser.
The onload event in JavaScript can be set using different syntaxes depending on how you want to attach the event handler. Here are a few examples:
1. Inline HTML attribute:
<body onload="myFunction()">
2. DOM property assignment:
<script>
window.onload = function() {
// Code to be executed when the window has finished loading
};
</script>
3. DOM event listener:
<script>
window.addEventListener('load', function() {
// Code to be executed when the window has finished loading
});
</script>The last two examples can be used to attach event handlers to any DOM element, not just the window. For example, you could replace window with the reference to a specific HTML element, such as document.getElementById('myElement'), to attach the onload event to that particular element.
Onload event in JavaScript examples
A simple example code uses the onload event.
<!DOCTYPE html>
<html>
<head>
<title>Onload Event Example</title>
<script>
function pageLoaded() {
// Code to be executed when the page has finished loading
console.log("Page loaded!");
}
</script>
</head>
<body onload="pageLoaded()">
<h1>Onload Event Example</h1>
<!-- Rest of the HTML content -->
</body>
</html>
Output:
You can also attach the onload event programmatically using JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Onload Event Example</title>
<script>
function pageLoaded() {
// Code to be executed when the page has finished loading
console.log("Page loaded!");
}
window.onload = pageLoaded;
</script>
</head>
<body>
<h1>Onload Event Example</h1>
<!-- Rest of the HTML content -->
</body>
</html>
In this case, the window.onload property is assigned the pageLoaded() function, which will be triggered when the page finishes loading.
More examples
Image onload event:
<!DOCTYPE html>
<html>
<head>
<title>Image Onload Event Example</title>
<script>
function imageLoaded() {
console.log("Image loaded!");
}
</script>
</head>
<body>
<img src="path/to/image.jpg" onload="imageLoaded()">
</body>
</html>
Multiple onload events using addEventListener:
<!DOCTYPE html>
<html>
<head>
<title>Multiple Onload Events Example</title>
<script>
function firstEvent() {
console.log("First event occurred!");
}
function secondEvent() {
console.log("Second event occurred!");
}
window.addEventListener('load', firstEvent);
window.addEventListener('load', secondEvent);
</script>
</head>
<body>
<!-- HTML content -->
</body>
</html>Window onload event:
<!DOCTYPE html>
<html>
<head>
<title>Window Onload Event Example</title>
<script>
window.onload = function() {
console.log("Window loaded!");
};
</script>
</head>
<body>
<!-- HTML content -->
</body>
</html>
How to Handle the JavaScript onload Event?
Answer: In JavaScript, the onload event is commonly used to trigger a specific action once a web page or an individual element has finished loading. Here’s how you can handle the onload event in JavaScript:
Handling the onload event for the entire page:
window.onload = function() {
// Code to be executed when the page has finished loading
};
The onload event for a specific element:
var element = document.getElementById('elementId');
element.onload = function() {
// Code to be executed when the element has finished loading
};
Using the addEventListener method:
window.addEventListener('load', function() {
// Code to be executed when the page has finished loading
});
Additionally, it’s considered best practice to place your JavaScript code just before the closing </body> tag to ensure that the DOM elements are available before the code is executed.
Comment if you have any doubts or suggestions on this Js event tutorial.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version