1. Tech

Your suggestion is on its way!

An email with a link to:

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

was emailed to:

Thanks for sharing About.com with others!

Learn Javascript

Page Events

Join the Discussion

Questions? Comments?

Related Terms

Event

Introduction

If you place Javascript code into the head section of your page outside of functions then that Javascript will run before the web page content is loaded. If you place Javascript code outside of functions in the body section of your web page then that Javascript will run as the page is loading (when the loading of the page reaches the code). In both of these instances the entire web page will not have been loaded - particularly if the page contains lots of images.

We can get Javascripts to run after the page has finished loading and even when the page is unloaded (by your visitor requesting another page) by attaching event handlers to the body tag itself.

Onload

The onload() event handler will run Javascript code that you want to run after everything on the page has finished loading. Unlike Javascript code placed at the very bottom of the web page source which will run after the whole HTML file has loaded but possibly before all of the images finish loading, any Javascript code triggered by the onload event handler will only run after everything needed by the web page including all images, scripts, stylesheets, and multimedia files have finished downloading to your visitors computer and loading into their browser window. To keep the code in the body tag itself short, the onload event handler usually runs a function from the head section of the page which itself contains the Javascript that is to be run after everything on the page is loaded. Here is an example:

<body onload="initdt(document.myForm);">

As you can see, in this example a parameter is being passed to the function that refers to some of the web page content. The whole web page needs to have loaded before this function can run otherwise the part of the page referred to by the parameter may not be accessible.

Onunload

The other time in the life of a web page where you may want to run some Javascript is when the web page is being unloaded to make way for another web page. The onunload() event handler can be used to run this Javascript code for you.

The use of the onunload event handler is identical to that of onload except for the timing of when the event handler is triggered. You can of course put both event handlers on the body tag if you require Javascript to run at both times.

Onresize

The onresize() event handler is a another that is attached to the body tag like onload and onunload. This event handler is triggered if the page being viewed is resized (ie. the browser window becomes larger or smaller).

Onscroll

The onscroll() event handler can also be attached to the body tag. This event handler is triggered every time that the page being viewed is scrolled (either horizontally or vertically). This event handler is supported by most modern browsers (Netscape 6 is the most recent browser that does not support this event).

A Better Way

The page level events are the easiest ones to actually move out of the HTML into the Javascript code attached to the head of your web page. For example we can recode our earlier onload event handler to run the initdt() function by placing the following into the Javascript and removing the onload attribute from the body tag.

function atload() {initdt(document.myForm);}
window.onload=atload;

Similar changes can be made to move the other page level event handlers referenced on this page.

Using What You Know

I probably shouldn't be advertising this but you now know enough to take a popup window script and set it to popup automatically when your page finishes loading or when your visitor leaves your page - provided of course that they are not running a popup blocker as popups attached this way are the ones that blockers will definitely block.

Past Lessons

  1. Introduction
  2. Decision Making
  3. Functions
  4. Maintain and Test
  5. External Script and Noscript
  6. Object Oriented Javascript
  7. Loops
  8. More Predefined Classes
  9. Document Object Model
  10. Event Handlers

©2014 About.com. All rights reserved.