2.4 Dynamic Content | Webmaster in a Nutshell, Third Edition


Team-Fly

	Webmaster in a Nutshell, 3rd Edition By Robert Eckstein, Stephen Spainhour
	Table of Contents

	Chapter 2. HTML Overview

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.

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.

2.4.5 JavaScript URLs

You can replace any conventional URL reference in a document with one or more JavaScript statements. The browser then executes the JavaScript code, rather than downloading another document, whenever the browser references the URL. The result of the last statement is taken to be the "document" referenced by the URL and is displayed by the browser accordingly . The result of the last statement is not the URL of a document; it is the actual content to be displayed by the browser.

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.


Team-Fly

Top