Home > Developer > JavaScript
An event represents the state of an incident, such as the element that triggered the object, the position and state of the mouse, the key pressed, and so on.
The event object is only valid during the events.
Some properties of an event are only meaningful for a particular event. For example, the Fromelement and Toelement properties are only meaningful for onmouseover and onmouseout events.
Example
The following example checks if the mouse is clicked on the link and, if the SHIFT key is pressed, cancels the linked jump. Front-End UI Resources I share
<HTML>
<script language= "JScript" >
function Cancellink () {
if (Window.event.srcElement.tagName = = "A" && Window.event.shiftKey)
Window.event.returnValue = false;
}
</SCRIPT>
<body onclick= "Cancellink ()" >
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
Front-End UI Resources I share
--------------------------------------------------------------------------------
1.altKey
Describe:
Check the state of the ALT key.
Grammar:
Event.altkey
Possible values:
When the ALT key is pressed, the value is TRUE, otherwise FALSE. Read-only.
2.button
Describe:
Check the mouse button that was pressed.
Grammar:
Event.button
Possible values:
0 No buttons.
1 Press the left button
2 Press the right button
3 Press the left and right key
4 Press the Middle key
5 Press the left and middle keys
6 Right-click and Middle-key
7 Press All the keys
This property is only used for onmousedown, onmouseup, and onmousemove events. Returns 0 (for example, onclick) for other events, regardless of mouse state.
3.cancelBubble
Describe:
Detects whether to accept control over events of the upper element.
Front-End UI Resources I share
Grammar:
event.cancelbubble[= cancelbubble]
Possible values:
This is a read-write Boolean value:
TRUE is not controlled by the upper primitive's events.
FALSE allows events to be controlled by the upper element. This is the default value.
Example:
The following code snippet shows the SHOWSRC () function that is thrown by the event onclick on the upper element (body) If the SHIFT key is pressed at the same time when clicking on the image (onclick).
<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 onclick= "showsrc ()" >
4.clientX
Describe:
Returns the x-coordinate of the mouse in the window client area.
Grammar:
Event.clientx
Comments:
This is a read-only property. This means that you can only use it to get the current position of the mouse, but it cannot be used to change the position of the mouse.
5.clientY
Describe:
Returns the y-coordinate of the mouse in the window client area.
Grammar:
Event.clienty
Front-End UI Resources I share
Comments:
This is a read-only property. This means that you can only use it to get the current position of the mouse, but it cannot be used to change the position of the mouse.
6.ctrlKey
Describe:
Check the state of the CTRL key.
Grammar:
Event.ctrlkey
Possible values:
When the CTRL key is pressed, the value is TRUE, otherwise FALSE. Read-only.
7.fromElement
Describe:
Detects onmouseover and onmouseout events that occur when the mouse leaves the element. 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 inner 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, which can be any Unicode keyboard inside code. If no keyboard event is raised, the value is 0.
Front-End UI Resources I share
9.offsetX
Describe:
Check the horizontal coordinates of the mouse position relative to the object that triggered the event
Grammar:
Event.offsetx
10.offsetY
Describe:
Check the vertical coordinates of the mouse position relative to the object that triggered the event
Grammar:
Event.offsety
11.propertyName
Describe:
Sets or returns the name of the property that changed the element.
Grammar:
Event.propertyname [= Sproperty]
Possible values:
Sproperty is a string that specifies or returns the name of the property that has changed in the event of the element that triggered the event.
This property is readable and writable. No default value.
Comments:
You can get the value of PropertyName by using the Onpropertychange event.
Example:
The following example shows the value of PropertyName by using the Onpropertychange event, which pops up a dialog box.
<HEAD>
<SCRIPT>
function Changeprop ()
{
Btnprop.value = "This is the new value";
}
function Changecssprop ()
{
BtnStyleProp.style.backgroundColor = "Aqua";
}
</SCRIPT>
</HEAD>
<BODY>
<p>the Event object Property PropertyName is
Used here to return which property has been
Altered.</p>
<input Type=button id=btnprop onclick= "Changeprop ()"
Value= "Click to change the VALUE property of this button"
Onpropertychange= ' Alert (event.propertyname+ "property has changed value") ' >
<input Type=button Id=btnstyleprop
Onclick= "Changecssprop ()"
Value= "Click to change the CSS backgroundcolor property of this button"
Onpropertychange= ' Alert (event.propertyname+ "property has changed value") ' >
</BODY>
12.returnValue
Describe:
Sets or checks 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 beginning of this article for an example.
Front-End UI Resources I share
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 use it to get the current position of the mouse, but it cannot be used 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 use it to get the current position of the mouse, but it cannot be used to change the position of the mouse.
15.shiftKey
Describe:
Check the state of the SHIFT key.
Grammar:
Event.shiftkey
Possible values:
When the SHIFT key is pressed, the value is TRUE, otherwise FALSE. Read-only.
16.srcElement
Describe:
Returns the element that triggered the event. Read-only. See the beginning of this article for examples.
Grammar:
Event.srcelement
17.srcFilter
Describe:
Returns the filter that triggered 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 shows "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 onmouseover= "Testmouse (This)" >mouse over this.</button>
Front-End UI Resources I share
19.type
Describe:
Returns the event name.
Grammar:
Event.type
Comments:
Returns the event name without "on" as the prefix, for example, the type returned by the onclick event is the click
Read-only.
X. X
Describe:
Returns the x-coordinate of the mouse relative to the ancestor element in the CSS property that has the Position property. If there is no ancestor element with the Position property in the CSS property, the BODY element is used as the reference object by default.
Grammar:
Event.x
Comments:
If the mouse moves out of the window after the event is triggered, the value returned is-1
This is a read-only property. This means that you can only use it to get the current position of the mouse, but it cannot be used to change the position of the mouse.
. Y
Describe:
Returns the y-coordinate of the mouse relative to the ancestor element with the Position property in the CSS property. If there is no ancestor element with the Position property in the CSS property, the BODY element is used as the reference object by default.
Grammar:
Event.y
Comments:
If the mouse moves out of the window after the event is triggered, the value returned is-1
This is a read-only property. This means that you can only use it to get the current position of the mouse, but it cannot be used to change the position of the mouse.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
