Understanding Events

In the world of JavaScript, events occur when something happens in the browser window, usually initiated by the visitor. One example is when the visitor moves the mouse pointer over a link; this action generates a mouseover event.

Events can also occur when the browser does something, such as loading a new document (load) or leaving a Web page (unload).

An event handlerwhich is the event name with the word on at the beginning (for example, onload)allows you to define what should happen when a particular event is detected for a particular object (Figure 12.4).

Figure 12.4. An event handler.

Table 12.3 lists some of the more common event handlers that you'll be using and what elements they can be used with. To see all these events on a single page, visit webbedenvironments.com/dhtml/event-handlers/, a page I set up to demonstrate how the event handlers work (Figure 12.5).

Table 12.3. Event Handlers

EVENT HANDLER	WHEN IT HAPPENS	ELEMENTS AFFECTED
onload	After an object is loaded	Documents and images
onunload	After the object is no longer loaded	Documents and images
onfocus	When an element is selected	Documents and forms
onblur	When an element is deselected	Documents and forms
onmouseover	When the mouse pointer passes over an area	Links and image map areas
onmouseout	When the mouse pointer passes out of an area	All
onclick	When an area is clicked in	All
onmousedown	While the mouse button is depressed	All
onmouseup	When the mouse button is released	All
onmousemove	As the mouse is moved	Document
onkeydown	While a keyboard key is down	Forms
onkeyup	When a keyboard key is released	Forms
onkeypress	When a keyboard key is down and immediately released	Forms
onresize	When the browser window or a frame is resized	Document
onmove*	When the browser window is moved	Document
***Not supported by IE4/5 or Netscape 6

Figure 12.5. This Web page contains examples of all the events discussed in this chapter, so that you can see them in action.

Events and the DOM

If you've used any type of scripting language in an HTML page, you've more than likely seen a DOM in action. The DOM works by targeting an element on the screen and providing the path a JavaScript function can use to address the element in response to an event triggered by an action in the browser window (Figure 12.6).

Figure 12.6. This example's process begins with the visitor's action (the mouseover) and ends with the browser's reaction (changing the graphic). In between, the browser senses the action (event), triggers a function, and uses DOM to change the image's source to a different graphic file.

Tips

• Although the href acts like an onclick event handler, it isn't one, and DHTML code may not run if it's activated using href="javascript:"

• The event handler can call JavaScript functions, or you can include JavaScript statements directly in the event handler.

• Most changes made in an object's styles with the DOM should be triggered by an event handler. At times, in fact, the JavaScript must be triggered by an event to work. I've wasted many, many hours trying to figure out what was wrong with my JavaScript, only to find that I had simply forgotten to trigger the script from an event.

• At first glance, onclick and onmouseup may seem to do the same thing. The click event, however, occurs only after the mouse button has been pressed and released. Both mousedown and mouseup break this action into two separate events, each of which can have a different action associated with it.