Properties of the Event Object

The event object, we saw earlier, is an instamatic snapshot of an event immediately following its occurrence. As such, the event object can be poked and prodded to learn about certain characteristics of the event. As an object it possesses a set of properties. Before we look at these properties there are two caveats to keep foremost in mind:

1. Not every event informs every possible event object property. Only properties which are relevant to the particular event are reflected. For example, the event object following a MouseOver event would not contain any properties reflecting which mouse button was depressed because no mouse button is depressed during this event. Yet, the event object for a MouseDown event would most definitely contain a property reflecting which button was depressed.

2. Once again, Microsoft and Netscape support a very different set of available properties for their respective event objects. With so little in common, in fact, between the two different event objects, we cannot even combine them into one effective table.

The following two tables, then, provide an overview of the event properties potentially available for a given event -- first, the Netscape chart followed by the Microsoft.

Table 2. Available Properties of the Event Object: Navigator 4.0

Property	Description
type	String value reflecting the name of the event; e.g. "Click" or "MouseOver".
target	String value reflecting the target element of this event, as its source HTML tag.
layerX or x	Horizontal position of the pointer relative to the layer it was within when the event occurred; alternatively, when passed with the Resize event, the horizontal width of the window following the resize.
layerY or y	Vertical position of the pointer relative to the layer it was within when the event occurred; alternatively, when passed with the Resize event, the vertical height of the window following the resize.
pageX	Horizontal position of the pointer relative to the page it was within when the event occurred.
pageY	Vertical position of the pointer relative to the page it was within when the event occurred.
screenX	Horizontal position of the pointer relative to the desktop screen when the event occurred.
screenY	Vertical position of the pointer relative to the desktop screen when the event occurred.
which	Integer value reflecting either which mouse button was pressed (1=left, 3=right) or the ASCII value of the pressed key.
modifiers	String value reflecting which modifier keys were depressed during a mouse or keyboard event. Possible values: "ALT_MASK", "CONTROL_MASK", "SHIFT_MASK", "META_MASK"
data	Array of strings containing the URLs of the dropped objects, passed only with the DragDrop event and only in a signed script which has UniversalBrowserRead privilege.

Table 3. Available Properties of the Event Object: Internet Explorer 4.0

Property	Description
type	String value reflecting the name of the event; e.g. "Click" or "MouseOver".
toElement	Reflects the object which has been moved onto as the result of a MouseOver or MouseOut event.
srcElement	Reflects the which was the target element; i.e. triggered the event.
srcFilter	Reflects the filter object which triggered a FilterChange event.
altKey, ctrlKey, shiftKey	For each of these properties its value is true if the specified key was depressed during the event and false if it was not.
keyCode	Integer value reflecting the Unicode key code for the key which caused the event.
button	Integer value reflecting which mouse button(s) was/were depressed during the event. Possible values: 0=none, 1=left, 2=right, 3=left & right, 4=middle, 5=left & middle, 6=right & middle, 7=left & middle & right
x, y	Integer values reflecting the horizontal and vertical positions, respectively, of the pointer relative to the parent object positioned with CSS positioning.
screenX, screenY	Integer values reflecting the horizontal and vertical positions, respectively, of the pointer relative to the desktop screen at the time of the event.
offsetX, offsetY	Integer values reflecting the horizontal and vertical positions, respectively, of the pointer relative to the target element which triggered the event.
clientX, clientY	Integer values reflecting the horizontal and vertical positions, respectively, of the pointer relative to the client area of the browser window; that is, excluding space occupied by scrollbars or other window gadgets.
reason	For a bound data source object, an integer reflecting its transfer state at the time of the event. Possible values: 0=Successful, 1=Transfer aborted, 2=Error.
recordset	For a bound data provider, reflects the record set.
repeat	Boolean value which is true if the event is being repeated, such as a keypress.
returnValue	Boolean value which determines the next sequence after handling the event. If true, the target element behaves as usual following this event; if false the target element does not proceed. This property takes precedence over a boolean value return by the event handler.
cancelBubble	Boolean value which determines whether this event should bubble up the event hierarchy. A false value allows bubbling to proceed; true aborts bubbling at this target element. See "event bubbling" discussion in later section.
bookmarks	Array of ADO bookmarks, each of which identifies a particular record in a recordset object, associated with the rows effected by the current event.

To recap this wrath of tables, we've seen two summaries of properties for the event object: those supported by Navigator and those supported by Internet Explorer. Prior to that we saw a summary of all events supported by one or both browsers. The holy grail of all these tables, then is ... another table!

Supported Events and Target Elements
Events in JavaScript: An Inside Look
Grand Unified Table: Events and Supported Properties of the Event Object