O'Reilly logo

JavaScript Application Cookbook by Jerry Bradenbaugh

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

x and y mouse coordinates in the status bar

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

The pixel distance between the two points

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.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required