JavaScript Event Object

JavaScript Event Object

In this JavaScript tutorial you will learn about JavaScript event object, properties of event object, altKey, ctrlKey and shiftKey, button, integer value action representation, cancelBubble, clientX and clientY, fromElement and toElement, height and width.

event Object:

The event object is a browser object used to get information about a particular event specified. Using event object, users can access information about event happenings. The difference between event object and Event object is such that the latter gives constants that can be used to identify events, while the former is used to get information about events.

Properties of event Object:

• altKey,ctrlKey and shiftKey
• button
• cancelBubble
• clientX
• clientY
• fromElement
• toElement
• height
• width
• keycode
• layerX
• layerY
• modifiers
• offsetX
• offsetY
• pageX
• pageY
• reason
• returnValue
• screenX
• screenY
• srcElement
• srcFilter
• target
• type
• which
• x and y

In the above list, some of the events are supported with Internet Explorer Browser and some with Navigator browser, which will be detailed. Some of the properties of event object are explained below.

altKey, ctrlKey and shiftKey:

The above property is used to indicate whether the Alt Key, Control Key or Shift Key was pressed by the user when the event occurred. The indication is known by appropriately setting the value as true or false. This property takes a boolean value as its return type. Both Internet Explorer and Navigator support this property. In Navigator, there is an extra property called metaKey which is not supported by Internet Explorer. This indicates if the user has pressed Meta key when the event occurred.

button:

The button property of event object is used to denote whether the mouse button was pressed or released when the event occurred. The indication is performed by means of an integer value where the values listed below are returned as per the action when the event occurred. The return value from button property is an integer.

Integer Value Action Representation

Sometimes, user presses more than one button at the same time when the event occurs. To indicate such a situation, the integer representation would take the sum of integer representations of buttons pressed by the user.

For example, if a user presses both the right and the middle button, then addition of the integer representations of right and middle button gives 2+4=6 is returned by the property. This property is supported both by Internet Explorer and Navigator. In Navigator, the integer representation values differ:

Integer Value Action Representation

cancelBubble:

cancelBubble property of event object is used for enabling or disabling the event bubbling concept of an event object.  Event bubbling concept will be discussed in the next section of this tutorial. This property enables and disables event bubbling by setting the boolean value appropriately as true or false as needed. The value of the property cancelBubble is set to true to prevent the event from bubbling and if it is set to false, the event bubbling is enabled. Only Internet Explorer supports this property. In Navigator, to implement the same property, the programmer has to use the method associated with event object (to be discussed in the methods of event object section).

clientX and clientY:

This property of event object indicates the cursor's horizontal and vertical position when the event occurs relative to the upper-left corner of the window. The denoted value would be in terms of pixels. Both by Internet Explorer and Navigator support this property.

Syntax for using this property is as follows:

fromElement and toElement:

These properties are supported only in Internet Explorer and denote the HTML element. The event moves from or to, respectively, for fromElement and toElement. The properties fromElement and toElement each denote, respectively, the elements the mouse is leaving from and moving onto. In Navigator, the property named relatedTarget is used to achieve the same result. In case of a mouseover event, the relatedTarget property of event object denotes the element that the mouse has left. In case of mouseout event, the relatedTarget property of event object denotes the element that the mouse has entered.

height and width:

The height and width property of event object is only supported by Navigator and it indicates the height and width of window or frame, respectively. The value is denoted in pixels.