If there were a contest for the most useful but least used technology introduced in the version 4 browsers, the winner would be user-triggered event handling. Unfortunately, there's been very little real-world use of this incredibly powerful technology. With just a few lines of DHTML, you can make your sites react to the user's keystrokes and mouse movements.

In this example, the page contains a pair of eyes, where the eyeballs move to follow the user's cursor. Along the way, it demonstrates how to use JavaScript events and some workarounds for the different browsers' Document Object Models (DOMs).

One of the first things you'll notice is that there are two SCRIPT tags, each with an initAll() function. JavaScript allows you to create a function twice, with the second version simply overwriting the first one. In this case, the first version of initAll() is initialized for all versions of JavaScript, and does nothing at all. The second version is the real one, and it only is available for browsers supporting JavaScript 1.2 and beyond. With this technique, you enable the newer browsers to do their cool stuff, and simultaneously keep the old browsers from reporting errors.

After it's triggered by the onLoad handler in the BODY tag, the initAll() function (as you'd guess from its name) initializes the variables that will be needed by later functions. As the objects being initialized are set based on values of objects on the page, they have to be set after the page has completed loading; otherwise, you'd get "Object does not exist" errors.

You use "document.all" to distinguish between the Internet Explorer and Netscape browsers. If "document.all" exists, it's IE, and along with initializing the local variables rightEye, leftEye, rightEyeball, and leftEyeball, you also have to explicitly state where the starting top and left positions are for the eyes. If the user's running Netscape, the rightEye, leftEye, rightEyeball, and leftEyeball variables are set to the Netscape versions of the same objects, and you explicitly state that this document wants to capture the MOUSEMOVE event. At the end, for all browsers, the handler for onmousemove is set to the moveHandler() function, and the animateEyes() function is called for the first time.

The moveHandler() function, triggered automatically whenever users move their mouse, also calls animateEyes(). The parameters being passed to that function are different depending on which browser is being used, but always contain the x and y positions of the cursor in the browser window. If the user has IE, animateEyes() is passed window.event.clientX and window.event.clientY. For Netscape, it's evt.pageX and evt.pageY, where evt is automatically passed in to moveHandler().

The function animateEyes() takes the x and y values of the cursor position, and uses them to reset the top and left positions of each eyeball. The actual calculation, though, is done by the newEyeballPos() function, which animateEyes() calls four times, for each of the left and top values of the left and right eyeballs.

The parameters of newEyeballPos() are the current position of the cursor (either x or y, depending on what direction you're resetting) and the top or left position of the eye itself, to keep track of the boundaries of where the eyeball is permitted to travel. Inside the eye, the eyeball can move in a 15-pixel-square area. The new value returned is either numeric (for Netscape) or string (for IE); in the latter case, with a "px" appended.

This example just shows the onMouseMove handler; the 4.0 browsers can also capture onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseUp, onMove, and onResize events. There's a lot more than just onMouseOut and onMouseOver these days—update your pages to take advantage of the possibilities.

Click here for sample code.