Quite frequently, you want some type of trigger to cause your DHTML to kick in. Whether repositioning blocks or changing style properties, some event usually causes these changes.

Many different types of event can occur on a Web page, most of them caused by the user. He or she might click on a button (click event), might move the mouse over an element (mouseover event), or move the mouse off of an element (mouseout event). The user may submit a form (submit event) or resize the browser window (resize event). Additionally, some events occur without direct user intervention -- the page may finish loading (load event), for example.

Talking about events in this article is tricky because, like our previous discussions, working with events crosses a couple of authoring technologies. The Document Object Model also defines types of events and their characteristics, such as to which elements they apply. More exactly, though, you manipulate and control events using JavaScript syntax. Once again, then, the handling of events is not exactly the same between Microsoft and Netscape browsers, at least until a standardized DOM comes along.

Managing events can be relatively simple or quite complex, depending on the ambitions of your project. Since this is an introduction, we'll focus mainly on event basics. Fortunately, basic events are handled most similarly between browsers.

Event Handlers

Events occur on a Web page whether you choose to act on them or not. When the user moves the mouse over an element, a mouseover event occurs. If you would like to leverage this event as a trigger for some dynamic action, you must construct an event handler.

An event handler is created as an attribute for the tag which defines the element at which you wish to catch the event. Event handler attribute named follow the syntax onEventname, and they accept JavaScript statements as their action. For example, the following tag creates a hyperlink with a mouseover event handler specified.

<A HREF="page.html"
   onMouseOver="changeStatus('Read this page');
   return true">
Click here
</A>

The onMouseOver event handler catches a mouseover event. When this event occurs at this element, a JavaScript function is called named changeStatus(). This is a fictional function, you can imagine that it might exist to change the message on the browser's status bar. Any JavaScript statement is allowed in an event handler, so we could also execute direct statement rather than call a function. For example, suppose that a mouseover for this element in MSIE should modify a style sheet's color property:

<A HREF="page.html"
 onMouseOver="document.styleSheets[0].rules[0].style.color='blue'"
 >
 Click here</A>

The above example assumes MSIE, since style sheet modifications aren't supported in Netscape. We also assume that a style sheet exists in this document! But, hey, it's just an example.

Once again, a convenient table will help summarize the common event and their event handler names.

The above table is a quick reference guide. There are some important caveats to keep in mind. For one, this is not a comprehensive list of all events, although these are by far the most commonly used. Both browser support additional events for detecting keypresses and other mouse actions, while MSIE supports additional events above and beyond Netscape's. Secondly, you must keep in mind that not every event is applicable to every element. This also varies between browsers. For example, within Netscape a mouseover event only applies to a hyperlink <A>, area <AREA> or layer <LAYER>. Yet, within MSIE, you can apply a mouseover event to almost any element, including images <IMG>, and paragraphs <P>.

In general, the above rule holds between browsers: Netscape restricts each event to certain limited elements, while MSIE allows most events to be handled at most elements. The best way to clarify these distinctions is to read the documentation -- Netscape's Events and Event Handlers and Microsoft's DHTML Events Reference.

Mastering event handling is most certainly a topic unto itself. At the surface, handling basic events is simple, as you've seen. The classic "rollover effect" is a perfect example of a simple event used in DHTML. A rollover occurs when the user moves the mouse over an element; while the mouse hovers over the element, its appearance changes to reflect that it is "active". When the mouse moves off the element is reverts to a more subdued state. Rollovers commonly use changes in either image or style. Below is a basic MSIE style-based rollover, which makes the "active" text red and bold, and returns to normal blue when inactive. Remember that such dynamic styles don't work so easily under Netscape, although you could certainly re-imagine this example for Netscape, perhaps by swapping an image for the rollover effect; or swapping a layer.