Team LiB
Previous Section Next Section

Chapter 6: JavaScript Events and Timers

One of the most useful things JavaScript has brought to the world of static Web pages is the ability to generate, capture, and use a wide variety of events. These events—ranging from key presses to mouse movements—brought dynamism to Web pages that could only be dreamed of before.

The events in JavaScript can be divided into two groups. The first group consists of events that happen automatically, such as onBeforeUnload, onError, onLoad, and onUnload, just to name a few. The other group contains events that are userdriven, such as onClick, onDblClick, onHelp, onKeyDown, and onMouseOver.

JavaScript Basic Events

This section covers the group of JavaScript events that happen automatically, called basic events. Basic events are events that occur without any input from the user. Events such as onLoad and onUnload are very useful for running scripts every time a Web page loads or is unloaded because they are generated by the browser and are guaranteed to run at a predictable time. The following is a list of basic events that are generated by the browser at certain times while a Web page is being used.

The basic events listed here all occur without visitor input and usually without the visitor even knowing that they're occurring.

Basic Event Example

Following is a very basic example that demonstrates the use of three of the basic events listed in the previous section:

      JavaScript Professional Projects - Basic Events

   onBeforeUnload="JavaScript: alert("onBeforeUnload event");"
   onLoad         ="JavaScript: alert("onLoad event");"
   onUnload       ="JavaScript: alert("onUnload event");">

     <font size=6>JavaScript Professional Projects</font><br>
     <font size=4>Chapter 3: Basic Events</font>


   <a href="">Some other page.</a>


This example binds three events to the <body> tag of the document (event binding is discussed later in this chapter). As soon as the page is visible in the browser, the onLoad event is triggered and displays a dialog box displaying the text onLoad event. If you were to switch to a different Web page, the onBeforeUnload event would be triggered immediately and would display another dialog box with the text onBeforeUnload. Just before the original document is replaced by the new one, the onUnload event is triggered, displaying the message onUnload event. While useful for illustration purposes, this example drastically oversimplifies the usefulness of these events. In the chapters to come you will be presented with several instances where these events are of practical use.

Using these basic JavaScript events affords you great power, but also leaves room for abuse. Many less reputable Web sites do try to trap a visitor within their site using code very similar to the following

  onBeforeUnload="JavaScript: local=window.location;"
  onUnload       ="JavaScript: window.location=local;">

This example would prevent the visitor of a site from leaving the page that it was used on. Not even the Forward and Back buttons would allow the visitor to move to a different page. Needless to say, this would be very annoying to your Web site's visitors.

Team LiB
Previous Section Next Section