The HTML DOM onload event in HTML occurs when an object has been loaded. The onload event is mostly used within the <body> tag, in order to run the script on the web page that will load all the content completely. The onload event can be used to check the user’s browser type and browser version and load the version of the web page based on the information. The onload event can also be used for cookies.
Syntax:
In HTML:
<element onload="scriptFile">
In JavaScript:
object.onload = function(){scriptFile};In JavaScript, using the addEventListener() method:
object.addEventListener("load", scriptFile);Example: Using the addEventListener() method
<!DOCTYPE html><html>
<head>
<title>
HTML DOM onload Event
</title>
</head>
<body>
<img src=
id="imgid" alt="GFG_logo">
<p id="pid"></p>
<script>
document.getElementById("imgid")
.addEventListener("load", GFGFun);
function GFGFun() {
document.getElementById("pid")
.innerHTML = "Image loaded";
}
</script>
</body>
</html>
|
Output: Here, the getElementById() method will return the elements that have given an ID which is passed to the function. It can also be used to change the value of any particular element or get a particular element. The DOM innerHTML property will be used to set or return the HTML content of an element.
HTML DOM onload Event
We have a complete list of HTML DOM methods, to check those please go through this HTML DOM Object Complete reference article.
Supported tags:
- <body>: It is used to define the main content present inside an HTML page.
- <frame>: It is used to divide the web browser window into multiple sections where each section can be loaded separately.
- <iframe>: It is used to define a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders.
- <img>: It is used to add images inside a webpage/website.
- <input type=”image”>: It is used to specify the type of <input> element to display.
- <link>: It is used to define a link between a document and an external resource.
- <script>: It is used to define the client-side script.
- <style>: It is used to modify our text, viewed in the page.
Supported Browsers: The browsers supported by HTML DOM onload Event are listed below:
- Google Chrome 1.0
- Internet Explorer 9.0
- Microsoft Edge 12.0
- Firefox 1.0
- Safari 3.0
- Opera 9.0
We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.