DOM Interactivity

The DOM is the object model that makes it possible to access a document's objects. It is in itself not interactive. To create interactive pages, we have to identify the events likely to influence an object (clicking on a link or image, pressing a keyboard key, etc.) and assign behaviours to these events. The following events are the ones most often used:

Event	Description
onClick	A click is detected.
onDbleClick	A double-click is detected.
onKeyDown	A key has been pressed.
onLoad	The page is loading.
onMouseOut	The mouse pointer is leaving a specific area (for instance, of an image or a link).
onMouseOver	The mouse pointer enters a specific area (for instance, of an image or a link).

There are also other events, for instance those associated with forms or windows. We will discover them in due course in the workshops.

All this may still be unclear. Imagine the following HTML tag:

<IMG SRC="button.gif">

There is nothing very complicated about all this. If you would like a message to appear when a visitor clicks on it, you would need to make a simple change, in the following way:

<IMG SRC="button.gif" onClick="alert('A click has been detected');">

It would also be possible to change the code so that the onClick event makes the image move, be replaced by another one (for rollover effect), or numerous other effects.