2.4. Dynamic Content
One of the most important features provided by web page scripting is the ability to detect and react to events that occur while a document is loaded, rendered, and used. Web page authors can set up scripts that will be triggered by such events as a cursor passing over an image, clicking on a link, or even leaving a page. The scripting code that responds to these events may be placed within the <script> element or loaded from a separate file. A special set of common element attributes point to a script when their event is triggered. These attributes are called event handlers.
<a href=doc.html DEFANGED_OnMouseOver="document.status='Click me!'; return true">
HTML supports a rich set of event handlers through related "on" event attributes. The value of any event handler attribute is either the name of a function defined elsewhere in the document, or a quoted string containing one or more script statements separated by semicolons. Extremely long statements can be broken across several lines, if needed.
At the lowest level, HTML event handlers are simply hooks defined by the browser manufacturer to access the Document Object Model of the browser. The DOM models the structure of the client as an interface for controlling it via scripting. For example, document.title is the interface for the title of a document, and window.frame is a single frame. Scripting can be used to alter these objects, whether it is to change their contents or how they are displayed.
An effort is underway at the W3C to implement a standard, platform-neutral DOM specification for web and XML applications. DOM Level 1 defined a core object model for HTML and XML documents. It provides for standard document navigation and manipulation. DOM Level 2 provides an event model and a model for style sheets and manipulating style information.
Currently, browsers support their own specific object models, which roughly comply with DOM Level 1. Currently, DOM Level 2 has been partially implemented in the latest generation of browsers.
2.4.1. Event Handler Attributes
Table 2-1 presents the current set of event handlers attributes. Some browsers support nonstandard event handlers; these are tagged with asterisks in the table.
Table 2-1. Event handlers
Event handlers can be separated into user- and document-related events. The user-related ones are the mouse and keyboard events that occur when the user handles either device on the computer. Document-related events are special events and states that occur during the display and management of an HTML document and its elements by the browser.
User-related events are quite ubiquitous, appearing as standard attributes in nearly all the HTML elements. Clearly, some elements have no use for user-generated event handlers, e.g., <base> or <meta>. Similarly, many elements don't trigger document events.
2.4.2. Mouse-Related Events
The onClick, onDblClick, onMouseDown, and onMouseUp attributes refer to the mouse button. The onClick event happens when the user presses down and then quickly releases the mouse button, unless the user quickly clicks the mouse button a second time. In the latter case, the onDblClick event gets triggered in the browser.
If you need to detect both halves of a mouse click as separate events, use onMouseDown and onMouseUp. When the user presses the mouse button, the onMouseDown event occurs. The onMouseUp event happens when the user releases the mouse button.
The onMouseMove, onMouseOut, and onMouseOver events happen when the user drags the mouse pointer. The onMouseOver event occurs when the mouse first enters the display region occupied by the associated HTML element. After entry, onMouseMove events are generated as the mouse moves about within the element. Finally, when the mouse exits the element, onMouseOut occurs.
For some elements, the onFocus event corresponds to onMouseOver, and onBlur corresponds to onMouseOut.
2.4.3. Keyboard Events
Only three events are currently supported by the HTML 4.01 standard relating to user keyboard actions: onKeyDown, onKeyPress, and onKeyUp. The onKeyDown event occurs when the user depresses a key on the keyboard; onKeyUp happens when the key is released. The onKeyPress attribute is triggered when a key is pressed and released. Usually, you'll have handlers for either the up and down events or the composite keypress event, but not for both.
2.4.4. Document Events
Most of the document-related event handlers relate to the actions and states of HTML form controls. For instance, onReset and onSubmit happen when the user activates the respective reset or submit button. Similarly, onSelect and onChange occur as users interact with certain form elements. Please consult Chapter 6 for a detailed discussion of these HTML forms-related events.
There also are some document-related event handlers that occur when various document elements get handled by the browser. For instance, the onLoad event may happen when a frameset is complete or when the body of an HTML document gets loaded and displayed by the browser. Similarly, onUnload occurs when a document is removed from a frame or window.
pops up an alert dialog box, and does nothing else. The document containing the hyperlink would still be visible after the dialog box gets displayed and is dismissed by the user.
Copyright © 2003 O'Reilly & Associates. All rights reserved.