12.9 The event Object


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

  1. The HTML form starts here.

  2. 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).

    graphics/12fig30.jpg

  3. The input type for this form is a button with the value " Click here " appearing in the button.

  4. 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.



JavaScript by Example
JavaScript by Example (2nd Edition)
ISBN: 0137054890
EAN: 2147483647
Year: 2003
Pages: 150
Authors: Ellie Quigley

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net