JavaScript Event Object Properties and Methods

In this JavaScript tutorial, you will learn about event object properties and methods like keycode, layer, offset, modifiers, page, reason, returnValue, screen, srcElement, target, srcFilter and type.

keycode:

The keycode property of event object is used to indicate the keycode associated with the key press of the event. The returned value is a Unicode keycode. If a user wants to convert the value as string, then the predefined function fromCharCode() must be used for conversion. The property keycode is supported only by Internet Explorer and in Navigator, the property named charCode is used to achieve the same result.

layerX and layerY:

The properties layerX and layerY of event object are used to return the cursor’s horizontal and vertical position, respectively, relative to the layer of occurrence of the event. The returned value from this property will be in pixels. Only Navigator supports this property and the same result can be achieved in Internet explorer by using the offsetX and offsetY properties of event object.

offsetX and offsetY:

The properties offsetX and offsetY of event object are used to return the cursor’s horizontal and vertical position relative to the container of occurrence of event. The returned value from this property will be in pixels. Only Internet explorer supports this property. In Navigator, the same result can be achieved by using layerX and layerY properties of event object.

modifiers:

The modifier property of event object indicates the keys ALT_MASK,CONTROL_MASK,SHIFT_MASK and META_MASK that are associated with the event happening or key press of an event. These are modifier keys, hence the name. This property is supported only on Navigator.

pageX and pageY:

The properties pageX and pageY of event object are used to indicate the cursor’s horizontal and vertical position relative to the page of occurrence of an event. The value denoted by these properties is in pixels. This property is supported only on Navigator and is not supported by Internet Explorer.

reason:

The reason property of event object denotes the status of the transfer of data. This property is supported only by Internet Explorer and not by navigator.

returnValue:

The returnValue of an event object is used to denote the event handler’s return value. A false Boolean value is set to indicate canceling of any default action for the event handler. Only Internet Explorer supports this property. In Navigator, the same action can be achieved by using the method preventDefault() which will be discussed in methods of event object.

screenX and screenY:

The properties screenX and screenY of event object are used to indicate the cursor’s horizontal and vertical position relative to the screen of occurrence of an event. The value denoted by these properties is in pixels. Internet Explorer supports both by Navigator and this property.

srcElement:

The srcElement property of event object denotes the element that the event occurred on. Only Internet Explorer supports this property and the same result can be achieved in Navigator by using the target property of event object.

target:

The target property of event object denotes the element in which the event occurred on. Only Navigator supports this property and the same results can be achieved in Internet Explorer by using the srcElement property of event object.

srcFilter:

The srcFilter property of event object denotes the filter object that initiated the onfilterchange event. The onfilterchange event is detailed in the next section of this tutorial. Only Internet Explorer supports this property.

type:

As the name implies, the type property of event object denotes the type of event; click, mouseout and so on. This property is supported both by Internet Explorer and Navigator.

x and y:

The properties x and y of event object are used to indicate the cursor’s horizontal and vertical position relative to the document of occurrence of an event. The value denoted by these properties is in pixels. This property is supported only by Internet Explorer and not by Navigator.

Methods of event object:

• preventDefault()
• stopPropagation()