JavaScript Bible, Gold Edition part 90 pptx

738
Part III ✦ Document Objects Reference
Listing 29-11 (continued)
with either mouse button (if you have more than one).</P>
<P>Enter some text with uppercase and lowercase letters:
<TEXTAREA COLS=40 ROWS=4 onKeyPress=”checkWhich(event)” WRAP=”virtual”>
</TEXTAREA></P>
</FORM>
</BODY>
</HTML>
The codes displayed for the keyboard event are equivalent to the ASCII values of
character keys. If you need the codes of other keys, the
onKeyDown and onKeyUp
event handlers provide Unicode values for any key that you press on the keyboard.
See the
keyCode property listings for event objects later in this chapter for more
details.
Event Types
Although browsers prior to Version 4 did not have an accessible event object,
this is a good time to summarize the evolution of what in today’s browsers is known
as the
type property. The type property reveals the kind of event that generates an
event object (the event handler name minus the “on”). Object models in IE4+ and
NN6+ provide event handlers for virtually every HTML element, so that it’s possi-
ble, for example, to define an
onClick event handler for not only a clickable button,
but also a P or even an arbitrary SPAN element. We’ll come back to the current crop
of browsers in a moment. But first, in case you must write scripts that work on
older browsers, you need to know which elements in those browsers support
which event handlers. This knowledge will help you determine a common denomi-
nator of event handlers to implement in your pages, based on the browsers you

anticipate will be accessing the pages.
Older browsers
Earlier browsers tended to limit the number of event handlers for any particular
element to just those that made sense for the kind of element it was. Even so, many
scripters wanted more event handlers on more objects. But until that became a
reality in IE4+ and NN6+, authors had to know the limits of the object models. Table
29-3 shows the event handlers available for objects within three generations of
early browsers. Each column represents the version in which the event type was
introduced. For example, the
window object started out with four event types and
gained three more when NN4 was released. In contrast, the area object was exposed
as an object for the first time in NN3, which is where the first event types for that
object are listed.
739
Chapter 29 ✦ Event Objects
Table 29-3 Event Types through the Early Ages
Object NN2/IE3 NN3 NN4
window blur dragdrop
focus move
load resize
unload
layer blur
focus
load
mouseout
mouseover
mouseup
link click mouseout dblclick
mouseover mousedown
onmouseup

area mouseout click
mouseover
image abort
error
load
form submit reset
text, textarea, password blur keydown
change keypress
focus keyup
select
all buttons click mousedown
mouseup
select blur
change
focus
fileUpload blur
focus
select
740
Part III ✦ Document Objects Reference
With the exception of the NN4 layer object, all objects shown in Table 29-3 have
survived into the newer browsers, so that you can use these event handlers with
confidence. Again, keep in mind that of the browsers listed in Table 29-3, only NN4
has an event object of any kind exposed to scripts.
Event types in IE4+ and NN6
By now you should have at least scanned the list of event handlers defined for
elements in common, as shown in Chapter 15. This list of event types is enormous.
A sizable number of the event types are unique to IE4, IE5, and IE5.5, and in some
cases, just the Windows version at that.
If you compose pages for both IE4+ and NN6+, however, you need to know which

event types these browser families and generations have in common. Event types
for NN6 are based primarily on the W3C DOM Level 2 specification, although they
also include keyboard events, which are not formally part of the Level 2 specifica-
tion. Table 29-4 lists a common denominator of event types for modern browsers
and the objects that support them. As you can see, many of these event types and
corresponding objects go way back to the beginning. The biggest change is that
mouse events are available for any visible element. While not as long as the IE event
list, the event types in Table 29-4 are the basic set you should get to know for all
browsers.
Table 29-4 IE4+ and NN6+ Event Types in Common
Event type Applicable Elements
abort OBJECT
blur window, BUTTON, text, password, LABEL, SELECT, TEXTAREA
change text, password, TEXTAREA, SELECT
click All elements
error window, FRAMESET, OBJECT
focus window, BUTTON, text, password, LABEL, SELECT, TEXTAREA
keydown text, password, TEXTAREA
keypress text, password, TEXTAREA
keyup text, password, TEXTAREA
load window, FRAMESET, OBJECT
mousedown All elements
mousemove All elements
mouseout All elements
mouseover All elements
mouseup All elements
reset FORM
resize window
741
Chapter 29 ✦ Event Objects

Event type Applicable Elements
scroll window
select text, password, TEXTAREA
submit FORM
unload window, FRAMESET
NN4 event Object
Properties Methods Event Handlers
data
layerX
layerY
modifiers
pageX
pageY
screenX
screenY
target
type
which
Syntax
Accessing NN4 event object properties:
eventObject.property
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓
About this object
Most of the details about this object were covered in the comparative event
object discussions earlier in this chapter. As the NN4 browser dissipates from the
user-installed base, this object and its details will become less important.
(NN4) eventObject
742
Part III ✦ Document Objects Reference

Properties
data
Value: Array of Strings Read-Only
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓
A DragDrop event contains information about the URL string being dragged to
the browser window. Because dragging multiple items to a window is possible (for
example, many icons representing URLs on some operating systems), the value of
the property is an array of strings, with each string containing a single URL (includ-
ing
file:// URLs for computer files).
URL information such as this is deemed to be private data, so it is exposed only
to signed scripts after the user has granted permission to read browser data. If you
want your signed script to capture this information without loading the URL into
the window, the event handler must evaluate to return
false.
Example (with Listing 29-12) on the CD-ROM
layerX
layerY
pageX
pageY
screenX
screenY
Value: Integer Read-Only
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓
For many (but not all) mouse-related events, the NN4 event object contains a lot
of information about the coordinates of the pointer when the event occurred. In the
most complex case, a click in a layer object has three distinct pairs of horizontal
and vertical (

x and y) coordinate values relative to the layer, the page, and the
entire screen. If no layers are specified for a document, the layer and page coordi-
nate systems are identical. Note that these values are merely geographical in nature
and do not, by themselves, contain any information about the object being clicked
(information held by the
eventObject.target property).
On the
CD-ROM
(NN4) eventObject.layerX
743
Chapter 29 ✦ Event Objects
These mouse coordinate properties are set only with specific events. In the case
of a link object, the
click and all four mouse events pack these values into the
event object. For buttons, however, only the mouse events (
mouseDown and
mouseUp) receive these coordinates.
Each of the two window event types (
move and resize) uses one of these prop-
erty pairs to convey the results of the user action involved. For example, when the
user resizes a window, the
resize event stuffs the eventObject.layerX and
eventObject.layerY properties with the inner width and height (that is, the con-
tent area) of the browser window (you can also use the optional
eventObject.width and eventObject.height property names if you prefer).
When the user moves the window, the
eventObject.screenX and
eventObject.screenY properties contain the screen coordinates of the top-left
corner of the entire browser application window.
Example (with Listing 29-13) on the CD-ROM

Related Items: window and layer object move and resize methods.
modifiers
Value: Constant Read-Only
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓
The modifiers property of the NN4 event object refers to the modifier keys that
can be pressed while clicking or typing. Modifier keys are Alt (also the Option key
on the Macintosh keyboard), Ctrl, Shift, and what is known as a meta key (for exam-
ple, the Command key, Ô, on the Macintosh keyboard). You can use this property
to find out if one or more modifier keys were pressed at the time the event
occurred.
Values for these keys are integer values designed in such a way that any combi-
nation of keys generates a unique value. Fortunately, you don’t have to know any-
thing about these values, because the event model supplies some plain-language
constants (properties of a global
Event object always available behind the scenes)
that a script can apply to the property value passed with the object. The constant
names consist of the key name (all uppercase), followed by an underscore and the
uppercase word
MASK. For example, if the Alt key is pressed by itself or in concert
with other modifier keys, you can use the bitwise AND operator (
&) and the
Event.ALT_MASK constant to test for the presence of the Alt key in the property
value:
function handleMyEvent(evt) {
if (evt.modifiers & Event.ALT_MASK) {
//statements for Alt key handling
}
}
On the

CD-ROM
(NN4) eventObject.modifiers
744
Part III ✦ Document Objects Reference
Modifiers are not available with every event. You can capture them with
mouseDown and mouseUp events in buttons and links. The only click event offering
modifiers is with button objects. Keyboard events in text objects also include these
modifiers. But be aware that accelerated keyboard combinations (for example,
Ctrl+Q/Ô-Q for Quit) are not trappable by JavaScript event mechanisms because
they are reserved for the browser’s own menu shortcuts.
Example
See Listing 29-10 earlier in this chapter to see (in a cross-browser way) how the
modifier keys are read for NN4.
target
Value: Object Reference Read-Only
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓
Every event has a property containing a reference to the object that was clicked,
typed into, or otherwise acted upon. Most commonly, this property is examined
when you set up a page to trap for events at the window, document, or layer level,
as described earlier in this chapter. The
target property lets you better identify
the intended destination of the event while handling all processing for that type of
event in one place. With a reference to the target object at hand in this property,
your scripts can extract and/or set properties of the object directly.
type
Value: String Read-Only
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓
An event object’s type is the name of the event that generated the event object.

An event name is the same as the event handler’s name, less the “on” prefix.
Therefore, if a button’s
onClick event handler is triggered by a user’s click, then
the event type is
click (all lowercase). If you create a multipurpose function for
handling events, you can extract the
eventObject.type property to help the func-
tion decide how to handle the current event. This sounds like a good job for the
switch control structure (see Chapter 39).
(NN4) eventObject.type
745
Chapter 29 ✦ Event Objects
which
Value: Integer Read-Only
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓
The value of the which property depends on the event type: a mouse button
indicator for mouse events and a character key code for keyboard events.
For a mouse-related event, the
eventObject.which property contains either a 1
for the left (primary) mouse button or a 3 for the right (secondary) mouse button.
Most Macintosh computers have only a one-button mouse, so exercise care in
designing pages that rely on the second mouse button. Even on Windows and other
platforms, you must program an object’s
onMouseDown event handler to return
false
for the secondary button to be registered instead of a browser pop-up menu
appearing on-screen.
Keyboard events generate the ISO-Latin character code for the key that has been
pressed. This value is an integer between 0 and 255. If your script needs to look at

the actual character being typed, rather than the key code, use the
String.fromCharCode() method (see Chapter 34) to make the conversion. If you
have difficulty obtaining character codes from keyboard events, try using the
onKeyDown and onKeyUp events rather than onKeyPress. In either case, the func-
tion keys do not present character codes.
Example
See Listing 29-10 for an example of using the eventObject.which property.
IE4+ event Object
Properties Methods Event Handlers
altKey
altLeft
behaviorCookie
behaviorPart
bookmarks
boundElements
button
cancelBubble
clientX
Continued
(IE) event
746
Part III ✦ Document Objects Reference
Properties Methods Event Handlers
clientY
contentOverflow
ctrlKey
ctrlLeft
dataFld
dataTransfer
fromElement

keyCode
nextPage
offsetX
offsetY
propertyName
qualifier
reason
recordset
repeat
returnValue
saveType
screenX
screenY
shiftKey
shiftLeft
srcElement
srcFilter
srcUrn
toElement
type
x
y
(IE) event
747
Chapter 29 ✦ Event Objects
Syntax
Accessing IE4+ event object properties:
[window.]event.property
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓

About this object
The IE4+ event object is a property of the window object. Its basic operation is
covered earlier in this chapter.
You can see a little of what the
event object is about with the help of The
Evaluator (see Chapter 13). If you type
event into the bottom text box, you can
examine the properties of the
event object for the event that triggers the function
that displays the
event object properties. If you press the Enter key in the text box,
you see properties of the
keypress event that caused the internal script to run;
click the List Properties button to see the properties of the
click event fired at the
button. Hold down some of the modifier keys while clicking to see how this affects
some of the properties.
As you review the properties for the
event object, make special note of the com-
patibility table for each property. The list of properties for this object has grown
over the evolution of the IE4+ event object model. Also, most properties are listed
here as being read-only, which they were in IE4. But for IE5+, these properties are
also Read/Write if the event is created artificially via methods, such as IE5.5’s
docu-
ment.createEventObject()
method. Event objects that are created by user or
system action have very few properties that can be modified on the fly (to prevent
your scripts from altering user actions).
Properties
altKey

ctrlKey
shiftKey
Value: Boolean Read-Only
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓
When an event object is created in response to a user or system action, these
three properties are set based on whether their corresponding keys were being
held down at the time — a Shift-click, for example. If the key was held down, the
property is assigned a value of
true; otherwise the value is false.
(IE) event.altKey