Working with Events

We've been using events since Chapter 1, "Essential JavaScript." However, one often uses events as simple notifications that an eventsuch as a mouse clickoccurred so that you can execute your own code. On the other hand, when you're reading keys or detecting which mouse button was clicked, you need to know moreyou need to use the properties of the event object.

The event object has changed a great deal as browsers developed. Chapter 6, "Using Core HTML Methods and Events," discussed in overview the three major event object models. I reproduce that information in Table 15.1 here, because we need it in this chapter. As you can see, the three major event object models correspond to Netscape Navigator version 4.0, Internet Explorer 4+, and Netscape Navigator 6.0. To read a keystroke in Netscape Navigator 4.0, for example, you use the which property, but to read a keystroke in Internet Explorer 4.0, you use the keyCode property.

Table 15.1. Core event Object Properties

NS4	NS6	IE4+	Means
-	clientX	clientX	X location in a window
-	clientY	clientY	Y location in a window
layerX	layerX	x	X location in a positioned item
layerY	layerY	y	Y location in a positioned item
modifiers	shiftKey	shiftKey	Keyboard modifier keys
	altKey	altKey
	ctrlKey	ctrlKey
-	-	offsetX	X location in a container
-	-	offsetY	Y location in a container
pageX	pageX	-	X location in the page
pageY	pageY	-	Y location in the page
screenX	screenX	screenX	X location in the screen
screenY	screenY	screenY	Y location in the screen
target	target	srcElement	Element the event was targeted to
type	type	type	Type of event that occurred
-	-	wheelDelta	The distance the wheel button rolled
which	keyCode	keyCode	Keyboard key that caused the event
which	button	button	Mouse button that caused the event

We're going to take a look at the properties of the event object for all three models in depth in this chapter, which will enable us to work with devices such as the mouse and the keyboard. Let's start by taking a look at working with the mouse.