12.9 The event Object

Event objects are sent to an event handler with each event that occurs within a document. The object provides information about the event, described by its many properties, but is implemented differently in Netscape Navigator and in IE. Table 12.7 provides a list of the properties for Netscape Navigator and Internet Explorer.

Table 12.7. Properties of the event object.

Property	What It Describes
altKey, ctrlKey, shiftKey	Set to true or false to test if Alt, Shift, or Control keys were pressed when the event occurred (IE)
button	The mouse button that was pressed (IE)
cancelBubble	Set to true or false to cancel or enable event bubbling
clientX and clientY	The cursor's horizontal and vertical position in pixels, relative to the Web page in which the event occurred (IE)
data	Array of URLs for dragged and dropped (NN)
fromElement and toElement	The HTML element being moved to or from (IE)
height and width	Height and width of the window (NN)
keyCode	The Unicode key code associated with a keypress event (IE)
layerX and layerY	Horizontal and vertical cursor position within a layer (NN)
modifiers	The bitmask representing modifier keys such as Alt, Shift, Meta, etc. (NN)
offsetX and offsetY	The cursor's horizontal and vertical position in pixels, relative to the container in which the event occurred (IE)
pageX and pageY	Horizontal and vertical cursor position within a Web page (NN)
reason	Used to indicate the status of a data transfer for data source objects (IE)
returnValue	The return value of the event handler, either true or false (IE)
screenX and screenY	Horizontal and vertical cursor position within a screen (NN)
srcElement	Same as target for IE
srcFilter	Specifies the filter object that caused an onfilterchange event (IE only)
target	Object for captured events (NN)
type	The type of event that occurred (NN)
which	A numeric value for the mouse button that was pressed or the ASCII value of a pressed key (NN)
x and y	The cursor's horizonal and vertical position in pixels, relative to the document in which the event occurred (IE)

Example 12.22

 <html><head><title>Event Properties</title>     </head>     <body bgcolor="yellow"     <font face = "verdana">     <!--Internet Explorer has src.Element property-->     <!--Netscape has target property--> 1  <form name="form1"  2  onSubmit="alert(event.type + ' ' + event.srcElement);">  3       <input type=button             name="mybutton"             value="Click here" 4  onClick="alert(event.type + ' ' +event.target);">  <input type=submit>     </form>     </body>     </html>

EXPLANATION

The HTML form starts here.
When the user presses the submit button for this form, the onSubmit event is fired up. It will cause an alert message to appear displaying two event properties: the type of the event and the srcElement (Internet Explorer) property of the object to which the event was sent. See the left of Figure 12.30.

Figure 12.30. Displaying the event object's property in Internet Explorer (left), and Netscape (right).
The input type for this form is a button with the value " Click here " appearing in the button.
When the onClick event is triggered, an alert message will appear displaying two event properties: the type of the event and the target (Netscape) property or object to which the event was sent. See the right of Figure 12.30.

12.9 The event Object

12.9 The event Object

Table 12.7. Properties of the event object.

Example 12.22

Figure 12.30. Displaying the event object's property in Internet Explorer (left), and Netscape (right).