Javascript- Onload Event Handler
The onload event handler in Javascript is an event handler that executes when a web page has finished loading up.
This is why it's called onload. It executes on the final loading of a web page, when the page has finished loading up.
Being that this is a web page and you're reading this, you are an internet user. When you first go to a web page, it has a loading time, for all its content to be loaded up. This includes text, pictures, videos, audio, if present. when everything has been loaded up, then the loading is finished. This is the point in which the javascript onload event handler will execute and carry out whatever action it is programmed to carry out. This may be to create a pop-up box displaying text to a user, creating a prompt pop-box asking a user for information, or any various commands.
How to Create an Onload Event Handler
Now that you know an onload event handler is an event handler that is carried out once a page has finished loading up, how do we create an onload event handler?
To create an onload event handler, we follow the format:
<body onload= "function();">
where function() is the function that will be executed once the page has finished loading.
An example of an actual onload event handler to create an alert pop-up displaying, "Welcome to this site" would be:
<body onload="alert ('Welcome to this site');">
So as soon as the page has finished loading up, the alert pop-box, "Welcome to this site" will pop-up.
To see this example, click on the following link: Javascript Onload Event Handler Example.
The reason the onload event handler is usually is placed in the HTML's body tag is because the body is the section
in code that is visible to a user when loading up. Since this is the part which is visible to a user when a page is loading, it only
makes sense to execute the onload event handler once the body has finished completely loading.
Related Resources
Javascript- Onunload Event Handler
Javascript- Onfocus Event Handler
Javascript- Onblur Event Handler
Javascript- Onclick Event Handler
Javascript- Onchange Event Handler
Javascript- Onkeydown Event Handler
Javascript- Onkeyup Event Handler
Javascript- Onmouseover Event Handler
Javascript- Onmousedown Event Handler
Javascript- Onmouseup Event Handler
Javascript- Onmouseout Event Handler
Javascript- Onreset Event Handler
Javascript- Onabort Event Handler
Javascript- Oncopy Event Handler