| home / programming / javascript / diaries / 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.
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.
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.)
| home / programming / javascript / diaries / 9 |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: September 16, 2005
URL:
