1. Tech

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/blonldom.htm

was emailed to:

Thanks for sharing About.com with others!

Onload and the DOM

Join the Discussion

Questions? Comments?

One thing that tends to confuse a lot of people who are new to Javascript is the reason for using onload when you have a script that reads and (probably) updates elements within the page. "Why doesn't document.getElementById work without it?" they ask. Another common problem is where they add two scripts to their page - one using an onload in the body tag and one using window.onload and then wonder why only one of the scripts works.

Let's start by answering the last of these related questions. When you attach an event handler to an element of the page (or the entire page) using onevent you can only attach one of each particular event handler to each element. This means that you can only attach one onload event to a page as only the last one that is defined will actually run as it will overwrite any prior definitions (there are ways to attach multiple event handlers to one element but that uses more advanced methods of attaching the events). There are two ways to attach an event handler to an element, one by physically coding the event handler in the HTML of the tag itself and the second by attaching the event handler within the Javascript. The second of these ways makes for cleaner HTML but it means that with the exception of events being attached to the entire page that you have to wait for the particular element to be loaded first before being able to attach the event handler.

In the case of the onload event we are attaching it to the whole page and so both the HTML and Javascript methods of attaching the event handler are available for us to use. The two are exactly equivalent in what they do and so to some extent it doesn't matter which of the two that you use as long as you remember that you can only attach one onload event to the page using this method. The following HTML and Javascript commands are identical in the processing that they perform.

<body onload="start()">
window.onload = start;

I recommend that you use the Javascript version of attaching this event handler because it has several advantages over the HTML version which include that the HTML is cleaner when it isn't cluttered with Javascript event handlers plus if you use it in an external Javascript you can attach the event to multiple pages without having to update the HTML in each individual page. Whichever of these that you choose to use in your page you need to remember that you can only use one or the other since they are functionally equivalent and the last executed will overwrite the prior one.

Now if we want to attach an event handler to an element within the page then the most commonly used method has always been to code the event handler in the HTML. The reason for this is that to be able to attach an event to the element from within the Javascript that element of the page must have first been loaded into the browser so that the javascript is able to find it in order to be able to attach the event handler. Since the onload event handler runs after all of the content of the page has loaded you know that the element that you are trying to reference has been loaded into the page already (assuming that it exists in the page) once the onload handler is triggered.

If you try to access an element within the page before the entire page has loaded (for example using document.getElementById) then depending on whether that part of the page has actually been loaded yet or not your code will either work or give an error. If the call is being done from a Javascript within the head of the page or within the body but prior to the spot where the element itself is defined then the element will almost certainly have not yet been loaded at the time that you try to reference it and so you will get an error. If the Javascript is within the body of the page after the spot where the element is defined then the element will probably be there when you try to reference it.

Of course including Javascript into the body of your page is also messy but if you are a beginner looking for a quick fix to get your javascript working until you learn enough javascript to do it properly then moving the Javascript to the very bottom of the body of your page may get it working for you.

Now the one disadvantage to moving all of your Javascript that uses DOM references into the onload event handler is that the event handler waits until the entire page is loaded before it runs. This means that it waits for all of the images and other objects that you have attached into the page. All you really need to wait for is that the HTML that defines the elements that you want to reference to be loaded however browsers don't have an event handler that runs after the HTML has loaded which doesn't also wait for the rest of the page to load as well. That's why some people move their javascript to the bottom of the page where it will hopefully run after the HTML has loaded but without waiting for all the images etc. to finish loading. The neater solution is to set up code that tests at regular intervals whether or not the element we want to reference has been loaded yet and to process it as soon as it is loaded. Of course this involves much more complex Javascript code but it is something that only needs to be written once and which can then be reused on every page where you want to be able to perform processing once particular page elements have loaded. Of course we can stop testing if the element has loaded once we find it and if we haven't found it by the time the whole page has loaded we know that there is no point in continuing to look for it.

The more modern ways of attaching events to web pages (using event listeners and attachEvent) solve the problem of attaching multiple processing to the same event but they still rely on the element within the page having loaded before you can reference it from your Javascript.

©2014 About.com. All rights reserved.