The JavaScript Diaries: Part 9

In our last two sections we looked at properties and methods of the window object. In this installment, we'll wrap up our study of the window object by learning how to use the most common of the window event handlers. We'll also take a look at some links for additional help.

Window Object Event Handlers

An event handler is a JavaScript keyword that allows a script to perform certain functions based on events on a Web page. Anytime something happens — a page loads, a link is clicked, the mouse moves — an event happens. Many times it's desirable to control these events. This can be done by using event handlers, which permit a script to interact with the visitor. A Web page can be more personable when events are performed based on actions taken by the individual visitor. This makes the page much more interesting than a static HTML document.

Think of the event handler as it's written. Using the onLoad event handler, you could say, "On loading the Web page, run the following JavaScript function when it's completed."

(Note: The capitalization of the actual event handler is optional, except when using XHTML. It can generally be written as "onload" or "onLoad." For our purposes, we'll use the latter format.)

Event handlers are usually placed in a form element, the opening body element, or in a link element. Occasionally they're used within the script itself. Let's take a look at the ones commonly used with the window object.

onLoad

This event handler is used to execute a script after a page has fully loaded. That includes loading all scripts, graphics, plugins and Java applets. This is different than what we've done up to now. When we called an alert window from a script located in the head section while the document was loading ("parsing"), the document stopped loading and ran the script, which then loaded the alert window. Once the alert window was closed, the document continued to load. Often JavaScripts are executed as the page is parsed. Beginning at the top of the Web page, scripts will be executed as they are encountered by the browser. Using the onLoad event handler, the entire page and all of its related files and components are loaded before the function listed in the onLoad event handler is executed.

This particular event handler is generally used within the body or frameset tag. An example would be:

<body onLoad="alert('This page has finished loading!)"

(While this will work just fine, there are more effective uses for the onLoad event handler than just for an alert box. We'll take a look at them later in our studies.)

A better way to use the onLoad event handler would be to put it in an external file, with a link to the file placed in the head of the page. That way it can easily be changed and will not be mixed with the HTML code. Actually, you should place all of your JavaScript code in an external file. You'll need to make sure that there are no duplicate function names or variable names so as to eliminate any problems. Place the onLoad event handler at the end of the file:

window.onload=functionName;

If you have more than one onLoad event handler, you will need to call them a little differently. If you were to just list them all as the example above, only the last one would execute, e.g.:

window.onload=functionName1;
window.onload=functionName2;
window.onload=functionName3;

In the example above, only the window.onload=functionName3; would run. This is because each succeeding line would replace the previous one. To run more than one onLoad event handler, you need to list the calls within a function. One way of doing that is shown below:

function start() {
  runFunction1();
  runFunction2();
  runFunction3();
}
window.onload = start;

In the example above, once the window has loaded, the function named start will execute and run the other functions listed. (Be sure to include a link to the external file in the head section of page.)

[next]

Created: September 16, 2005

URL:

The JavaScript Diaries: Part 9