JavaScript Application Cookbook

events.js

Practical uses

Cross-browser event handler assignment, mouse movement tracking

Version requirement

JavaScript 1.2

Functions

enableEffects(), showXY(), keepKeys(), showKeys()

If you haven’t experimented with cross-browser event handling scripts, this might be just the primer for you. This example utilizes three event handlers: onclick, onmousemove, and onkeypress. When you first click anywhere in the document space, the JavaScript captures the initial x and y coordinates of the mouse-pointer arrow with respect to the browser window. After that, the status bar displays the x and y coordinates as the user moves the pointer arrow around. Clicking once again “turns off” the coordinate tracking and calculates the pixel distance between the point the user first clicked and current location. You can see this in Figure 6.7 and Figure 6.8.

Figure 6-7. x and y mouse coordinates in the status bar

Figure 6-8. The pixel distance between the two points

Independent of the mouse action, you can also type any sequence of keys on your keyboard. The status bar will then display each of the individual keys you type. When you finish, choose the “Show Keys” button, and you’ll get a JavaScript alert dialog box that displays the cumulative sequence of keys you entered up to that point.