Javascript| Object Description
An event represents the state of an incident, such as the element that triggers the events object, the position and state of the mouse, the pressed key, and so on.
The event object is valid only if it occurs.
Some properties of an event are only meaningful for a particular event. For example, the fromelement and toelement attributes are only meaningful for onmouseover and onmouseout events.
Example
The following example checks to see if the mouse clicks on the link and cancels the link jump if the SHIFT key is pressed.
<HTML>
<script language= "JScript" >
function Cancellink () {
if (Window.event.srcElement.tagName = "A" && Window.event.shiftKey)
Window.event.returnValue = false;
}
</SCRIPT>
<body >
The following example displays the current position of the mouse on the status bar.
<body onmousemove= "window.status = ' x= ' + window.event.x + ' y= ' + window.event.y ' >
Property:
Altkey, Button, cancelbubble, ClientX, ClientY, Ctrlkey, Fromelement, KeyCode, OffsetX, OffsetY, PropertyName, Returnvalu E, ScreenX, ScreenY, Shiftkey, srcelement, Srcfilter, toelement, type, x, y
--------------------------------------------------------------------------------
1.altKey
Describe:
Check the status of the ALT key.
Grammar:
Event.altkey
Possible values:
TRUE if the ALT key is pressed, or FALSE. Read-only.
2.button
Describe:
Check the pressed mouse button.
Grammar:
Event.button
Possible values:
0 No buttons.
1 Press left button
2 Press the right button
3 Press about key
4 Press the Middle key
5 left and Middle keys
6 Press right and middle key
7 Press All the keys
This property is used only for onmousedown, onmouseup, and onmousemove events. For other events, returns 0 (such as onclick), regardless of mouse state.
3.cancelBubble
Describe:
Detects whether to accept control of events for upper-level elements.
Grammar:
event.cancelbubble[= cancelbubble]
Possible values:
This is a Boolean value that can be read and written:
TRUE is not controlled by the events of the upper element.
FALSE allows to be controlled by the events of the upper element. This is the default value.
Example:
The following code fragment shows the SHOWSRC () function that is raised by the event onclick on the upper element (body) When the SHIFT key is pressed as well when clicked (onclick) on the picture.
<script language= "JScript" >
function Checkcancel () {
if (Window.event.shiftKey)
Window.event.cancelBubble = true;
}
function Showsrc () {
if (Window.event.srcElement.tagName = "IMG")
alert (WINDOW.EVENT.SRCELEMENT.SRC);
}
</SCRIPT>
<body >
4.clientX
Describe:
Returns the x-coordinate of the mouse in the client area of the window.
Grammar:
Event.clientx
Comments:
This is a read-only property. This means that you can only get the current position of the mouse through it, but you cannot use it to change the position of the mouse.
5.clientY
Describe:
Returns the y-coordinate of the mouse in the client area of the window.
Grammar:
Event.clienty
Comments:
This is a read-only property. This means that you can only get the current position of the mouse through it, but you cannot use it to change the position of the mouse.
6.ctrlKey
Describe:
Check the state of the CTRL key.
Grammar:
Event.ctrlkey
Possible values:
The value is TRUE when the CTRL key is pressed, or FALSE. Read-only.
7.fromElement
Describe:
Detects the element that the mouse leaves when the onmouseover and onmouseout events occur. Reference: 18.toElement
Grammar:
Event.fromelement
Comments:
This is a read-only property.
8.keyCode
Describe:
(Please refer to http://www.joyist.com/forum/showtopic.asp?TOPIC_ID=31&Forum_ID=2)
detects the internal code corresponding to the keyboard event.
This property is used for onkeydown, onkeyup, and onkeypress events.
Grammar:
event.keycode[= KeyCode]
Possible values:
This is a read-write value that can be any one of the Unicode keyboard codes. If a keyboard event is not raised, the value is 0.
9.offsetX
Describe:
Check the horizontal coordinates of the mouse position relative to the object triggering the event
Grammar:
Event.offsetx
10.offsetY
Describe:
Check the vertical coordinates of the mouse position relative to the object triggering the event
Grammar:
Event.offsety
11.propertyName
Describe:
Sets or returns the name of the changed property of the element.
Grammar:
Event.propertyname [= Sproperty]
Possible values:
Sproperty is a string that specifies or returns the name of the attribute that triggered the event that changed the element in the event.
This property is readable and writable. No default value.
Comments:
You can get the PropertyName value by using the Onpropertychange event.
Example:
The following example uses the Onpropertychange event to pop up a dialog box that displays the value of the PropertyName.
<HEAD>
<SCRIPT>
function Changeprop ()
{
Btnprop.value = "This is the new value";
}
function Changecssprop ()
{
BtnStyleProp.style.backgroundColor = "Aqua";
}
</SCRIPT>
</HEAD>
<BODY>
<p>the Event Object PropertyName is
Used which property has been
Altered.</p>
<input Type=button Id=btnprop
Value= "Click to change" The VALUE of this button "
Onpropertychange= ' Alert (event.propertyname+ "property has changed value") ' >
<input Type=button Id=btnstyleprop
Value= ' Click to change ' CSS backgroundcolor property ' This button '
Onpropertychange= ' Alert (event.propertyname+ "property has changed value") ' >
</BODY>
12.returnValue
Describe:
Set or check the value returned from the event
Grammar:
event.returnvalue[= Boolean]
Possible values:
The value in the true event is returned
False the default action for events on the source object is canceled
See the example at the beginning of this article.
13.screenX
Describe:
Detects the horizontal position of the mouse relative to the user's screen
Grammar:
Event.screenx
Comments:
This is a read-only property. This means that you can only get the current position of the mouse through it, but you cannot use it to change the position of the mouse.
14.screenY
Describe:
Detects the vertical position of the mouse relative to the user's screen
Grammar:
Event.screeny
Comments:
This is a read-only property. This means that you can only get the current position of the mouse through it, but you cannot use it to change the position of the mouse.
15.shiftKey
Describe:
Check the state of the SHIFT key.
Grammar:
Event.shiftkey
Possible values:
The value is TRUE when the SHIFT key is pressed, or FALSE. Read-only.
16.srcElement
Describe:
Returns the element that triggers the event. Read-only. Examples are shown at the beginning of this article.
Grammar:
Event.srcelement
17.srcFilter
Describe:
Returns the filter that triggers the onfilterchange event. Read-only.
Grammar:
Event.srcfilter
18.toElement
Describe:
Detects the elements that the mouse enters when the onmouseover and onmouseout events occur. Reference: 7.fromElement
Grammar:
Event.toelement
Comments:
This is a read-only property.
Example: The following code shows a dialog box that displays "mouse arrived" when you move the mouse over the button.
<SCRIPT>
function Testmouse (oobject) {
if (Oobject.contains (event.toelement)) {
Alert ("Mouse arrived");
}
}
</SCRIPT>
:
<button Id=obutton >mouse over this.</button>
19.type
Describe:
Returns the event name.
Grammar:
Event.type
Comments:
Returns the name of an event without "on" as a prefix, for example, the type returned by the onclick event is click
Read-only.
X. X
Describe:
Returns the x-coordinate of the mouse relative to the parent element of the Position property in the CSS property. If there is no ancestor element with the position attribute in the CSS property, the BODY element is used as the reference object by default.
Grammar:
Event.x
Comments:
If the mouse moves outside the window after the event is triggered, the value returned is-1
This is a read-only property. This means that you can only get the current position of the mouse through it, but you cannot use it to change the position of the mouse.
Y
Describe:
Returns the y-coordinate of the mouse relative to the parent element of the Position property in the CSS property. If there is no ancestor element with the position attribute in the CSS property, the BODY element is used as the reference object by default.
Grammar:
Event.y
Comments:
If the mouse moves outside the window after the event is triggered, the value returned is-1
This is a read-only property. This means that you can only get the current position of the mouse through it, but you cannot use it to change the position of the mouse.
