The onload event handler

Published on: October 29, 2016

Welcome to the nineteenth Easy JavaScript Tutorial, Beginner JavaScript Tutorial, part of Easy Programming! Is your JavaScript loading before your HTML (DOM)? Does it keep saying that it can't find your HTML elements? Keep reading because the onload() event handler is what you will need to solve your problems!

We covered the onclick() event handler a couple of videos ago, in this tutorial, we're going to look at the onload event handler. We normally see the onclick event handler applied to buttons but you can add it to text, images, videos, canvases, etc. 

The same can be said for the onload event handler, but the way we'll be using the onload event handler in this tutorial is as a method of the window object. Although it can be added to other elements such as images, understanding how it works with the window object will allow you to easily understand how it works with everything else. So let's take a look. 


There is no JSFiddle this wee, to follow along, view the onload.html file located here:


Remember to checkout the Resources section below for associated downloadable content, JSFiddle links, and other resources. Watch the video and follow along!


Please view/download the onload.html file here to follow along: Please view/download the onload.html file here to follow along:

The JavaScript file can be found here:

Also be sure to watch the tutorial on how to use your browser developer tools to learn more!