Dynamic Content (Webmaster in a Nutshell, 3rd Edition)

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.

For example, you might want to invoke a JavaScript function when the user passes the mouse over a hyperlink in a document. You simply add a "mouse over" event handler for the <a> tag called onMouseOver

<a href=doc.html DEFANGED_OnMouseOver="document.status='Click me!'; return 
true">

When the mouse passes over the example link, the browser executes the JavaScript statements. (Here, the JavaScript itself is embedded in the attribute, since it is so simple. Notice that the statements are enclosed in quotes and separated by a semicolon, and that single quotes surround the text-message portion of the first statement.)

While a complete explanation of this code is beyond our scope, the net result is that the browser places the message "Click me!" in the status bar of the browser window. Commonly, HTML authors use this simple JavaScript function to display a more descriptive explanation of a hyperlink, in place of the often cryptic URL the browser traditionally displays in the status window.

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 handler	HTML elements
`onAbort`	`<img>*`
`onBlur`	`<a>`
	`<area>`
	`<body>`*
	`<button>`
	`<frameset>`*
	`<input>`
	`<label>`
	`<select>`
	`<textarea>`
`onChange`	`<input>`
	`<select>`
	`<textarea>`
`onClick`	Most tags
`onDblClick`	Most tags
`onError`*	<img>
`onFocus`	`<a>`
	`<area>`
	`<body>`*
	`<button>`
	`<frameset>`*
	`<input>`
	`<label>`
	`<select>`
	`<textarea>`
`onKeyDown`	Most tags
`onKeyPress`	Most tags
`onKeyUp`	Most tags
`onLoad`	`<body>`
	`<frameset>`
	`<img>`*
`onMouseDown`	Most tags
`onMouseMove`	Most tags
`onMouseOut`	Most tags
`onMouseOver`	Most tags
`onMouseUp`	Most tags
`onReset`	`<form>`
`onSelect`	`<input>`
	`<textarea>`
`onSubmit`	`<form>`
`onUnload`	`<body>`
	`<frameset>`

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.

To create a JavaScript URL, use javascript as the URL's protocol:

<a href="DEFANGED_javascript:generate_document( )" >

In the example, the JavaScript function generate_document( ) gets executed whenever the hyperlink gets selected by the user. The value returned by the function, presumably a valid HTML document, is rendered and displayed by the browser.

It may be that the executed statement returns no value. In these cases, the current document is left unchanged. For example, this JavaScript URL:

<a href="DEFANGED_javascript:alert('Error!')" >

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.

See Chapter 11 for a complete reference on JavaScript.

2.4. Dynamic Content

2.4.1. Event Handler Attributes

Table 2-1. Event handlers

2.4.2. Mouse-Related Events

2.4.3. Keyboard Events

2.4.4. Document Events

2.4.5. JavaScript URLs