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

HTML Comment Box is loading comments...