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.

onAfterUpdate. This event is triggered when the transfer of data from a databound document to a data source has finished updating. Internet Explorer only.
onBeforeUnload. This event is triggered prior to a page being uploaded. Internet Explorer only.
onBeforeUpdate. This event is triggered before the transfer of data from a databound document to a data source begins updating. Internet Explorer only.
onDateAvailable. This event is triggered periodically as asynchronous data has arrived for an object such as an Applet. Internet Explorer only.
onDatasetChanged. This event is triggered as the data source content of an object such as an applet changes or the initial data becomes available. Internet Explorer only.
onDatasetComplete. This event is triggered when all data from the data source object is available to an object such as an applet. Internet Explorer only.
onError. This event is triggered when an error occurs in a script or other external data.
onErrorUpdate. This event is triggered when an error occurs during the transfer of data from a databound object to a data source. Internet Explorer only.
onFilterChange. This event is triggered as a filter changes the state of an element or as a transition completes. Internet Explorer only.
onFinish. This event is triggered at the end of MARQUEE looping. Internet Explorer only.
onLoad. This event is triggered when the document or other external object has completed downloading to the browser.
onReadyStateChange. This event is triggered when the state of an object changes. Internet Explorer only.
onStart. This event is triggered at the beginning of MARQUEE looping. Internet Explorer only.
onUnload. This event is triggered as the document is about to be unloaded from the browser.

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:

<html>
  <head>
    <title>
      JavaScript Professional Projects - Basic Events
    </title>
  </head>

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

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

   <br><br>
   <br><br>

   <a href="http://www.yahoo.com/">Some other page.</a>

  </body>
</html>

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


<body
  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.