Download (direct link):
onMove window (frame) The user moves or resizes the window or frame.
onReset form The form is reset; either the user clicks a Reset button, or the programmer invokes the form.reset() method.
onResize window (frame) The user resizes the window or frame.
onSubmit form The form is submitted; either the user clicks a Submit button, or the programmer invokes the form.submit() method.
onUnload window The user unloads a document (by closing the browser or by loading another document).
Many programmers find four categories of event handlers to be the most useful: window-related events, mouse-related events, form-related events, and key-related events. In the following four sections, I show you examples of each of these four important event categories.
Chapter 13: Handling User-Initiated Events 243
The Event's the thing
Both Navigator and Internet Explorer support the concept of an Event object designed for advanced event-handling scenarios. In theory, you can use the Event object to capture and examine nitty-gritty details about an event that occurs. For example, if a user clicks a mouse button, you can use the methods and properties associated with the Event object to determine which mouse button the user clicks and even the coordinates of the pointer at the time of the click. If a user presses a key, you can use the methods and properties associated with the
One window event that most Web surfers are familiar with is the pop-up advertisement — a tiny (or not-so-tiny) window that appears automatically when you load certain Web pages into your browser. Pop-up ads are attached to the onLoad event handler (and sometimes the onUnload event handler, too, which can pelt you with additional pop-up ads as you try to surf away from a site).
In addition to the onLoad and onUnload event handlers, windows — and frames, which are a special type of window — support event handlers including onBlur, onFocus, onMove, and onResize, as Table 13-2 describes.
Table 13-2 Window- and Frame-Related Event Handlers
Event Handler Event (Event Handler Triggered When...)
onBlur The element loses input focus. (Clicking out of or tabbing away from an element takes away that element's input focus.)
onFocus The element gains input focus.
onLoad The element loads successfully.
onMove The user moves or resizes the window or frame.
onResize The user resizes the window or frame.
onUnload The user unloads a document (by closing the browser or by loading another document).
244 Part IV: Interacting with Users
<BODY onUnload=”alert('Goodbye, and thank you for stopping by my Web site');'')
Mouse events make cool interactive effects such as rollovers (see Chapter 8) and tooltips (see Chapter 11) possible. No such object as mouse exists. Rather, mouse events occur when a mouse pointer moves — or is clicked — over some other object. For example, the following code ties two functions
(displayToolTip() and hideToolTip()) to the onMouseOver and onMouseOut event handlers associated with an HTML-defined area.
<MAP name=”PicMap” id=”PicMap”>
<AREA SHAPE=”rect” COORDS=”226,25,303,82” HREF=”#” onMouseOut=”hideTooltip('tooltip4')” onMouseOver=”displayTooltip(event,'tooltip4')”/>
Table 13-3 describes additional mouse events — and the objects and event handlers associated with those events.
Table 13-3 Mouse-Related Event Handlers
Event Handler Supporting Objects Event (Event Handler Triggered When...)
onMouseDown Button, Checkbox, document, FileUpload, Image (and Area), Link, Password, Radio, Reset, Select, Submit, Text, Textarea The user presses a mouse button (but doesn't release it).
onMouseOut Image (and Area), Link The mouse moves off the element.
onMouseOver Image (and Area), Link The mouse moves onto the element.
onMouseUp Button, Checkbox, document, FileUpload, Image (and Area, Link, Password, Radio, Reset, Select, Submit, Text, Textarea The user releases a previously clicked mouse button.
Chapter 13: Handling User-Initiated Events 245
HTML defines a handful of form elements, or controls (push buttons, radio buttons, check boxes, and so on). Each of these elements is associated with appropriate event handlers.