Parse event object (JavaScript) in detail)

Source: Internet
Author: User
Describes the status of an event, such as the element that triggers the event object, the location and status of the mouse, and the key that you press. The event object is valid only when an event occurs. Some Properties of the event only make sense for specific events. For example, the fromelement and toelement attributes only make sense for onmouseover and onmouseout events. In the example below, check whether the mouse is clicked on the link. If the Shift key is pressed, the link jump will be canceled. <HTML>
<Head> <title> cancels Links </title>
<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 shows the current position of the mouse on the status bar. <Body onmousemove = "window. Status = 'X = '+ window. event. x + 'y =' + window. event. Y">
Attributes: altkey, button, Member, clientx, clienty, ctrlkey, fromelement, keycode, offsetx, offsety, propertyname, returnvalue, screenx, screeny, delimiter, srcelement, srcfilter, toelement, Type, x, Y ---------------------------------------------------------------------------------- 1. altkey
Description:
Check the status of the Alt key. Syntax:
Possible values of event. altkey:
When the Alt key is pressed, the value is true; otherwise, the value is false. Read-only.
2. Button
Description:
Check the pressed mouse key. Syntax:
Possible values of event. Button:
0 without buttons
1 left click
2. Right-click
3. Press the Left or Right key.
4. Press the intermediate key
5. Press the left and intermediate keys.
6. Right-click and select intermediate key.
7. Press all keys. This attribute is only used for onmousedown, onmouseup, and onmousemove events. For other events, 0 (such as onclick) is returned regardless of the mouse status ). 3. cancelbubble
Description:
Checks whether events of the upper layer are controlled. Syntax:
Event. cancelbubble [= cancelbubble] possible values:
This is a read-write Boolean value: True is not controlled by the event of the Upper-layer element.
False allows the event to be controlled by the upper-layer element. This is the default value. Example:
The following code snippet demonstrates how to cancel showsrc () triggered by event onclick on the upper-Layer Element (body) if the Shift key is also pressed when you click onclick on the image () function. <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
Description:
Returns the X coordinate of the mouse in the client area of the window. Syntax:
Event. clientx notes:
This is a read-only attribute. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.
5. clienty
Description:
Returns the Y coordinate of the mouse in the client area of the window. Syntax:
Event. clienty notes:
This is a read-only attribute. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.
6. ctrlkey
Description:
Check the status of the ctrl key. Syntax:
Possible values of event. ctrlkey:
When the ctrl key is pressed, the value is true; otherwise, the value is false. Read-only.
7. fromelement
Description:
Detects the elements that the mouse leaves when the onmouseover and onmouseout events occur. Refer to: 18. toelement Syntax:
Event. fromelement notes:
This is a read-only attribute.
8. keycode
Description:
(See http://www.joyist.com/forum/showto... id = 31 & forum_id = 2)
Detects the internal code corresponding to the keyboard event.
This attribute is used for onkeydown, onkeyup, and onkeypress events. Syntax:
Event. keycode [= keycode]
Possible values:
This is a readable value and can be any Unicode keyboard internal code. If no keyboard event is triggered, the value is 0.
9. offsetx
Description:
Check the horizontal coordinate syntax of the mouse position relative to the object that triggers the event:
Event. offsetx
10. offsety
Description:
Check the vertical coordinate syntax of the mouse position relative to the trigger event object:
Event. offsety
11. propertyname
Description:
Sets or returns the name of an element's changed attribute. Syntax:
Event. propertyname [= sproperty] possible values:
Sproperty is a string that specifies or returns the name of the attribute changed by the element that triggers the event.
This attribute can be read and written. No default value. Note:
You can use the onpropertychange event to obtain the value of propertyname. Example:
The following example uses the onpropertychange event to display the value of propertyname in 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
Description:
Set or check the Value Syntax returned from the event:
Event. returnvalue [= Boolean] possible values:
The value in the true event is returned.
False: the default operation of events on the source object is canceled. For example, see the beginning of this article.
13. screenx
Description:
Syntax for detecting the horizontal position of the mouse relative to the user's screen:
Event. screenx
Note:
This is a read-only attribute. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.
14. screeny
Description:
Syntax for detecting the vertical position of the mouse relative to the user screen:
Event. screeny notes:
This is a read-only attribute. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.
15. shiftkey
Description:
Check the status of the shift key. Syntax:
Possible values of event. shiftkey:
When the Shift key is pressed, the value is true; otherwise, the value is false. Read-only.
16. srcelement
Description:
Returns the element of the trigger event. Read-only. For examples, see the beginning of this article. Syntax:
Event. srcelement
17. srcfilter
Description:
Returns the filter that triggers the onfilterchange event. Read-only. Syntax:
Event. srcfilter
18. toelement
Description:
Detects the elements that the mouse enters when the onmouseover and onmouseout events occur. Reference: 7. fromelement Syntax:
Event. toelement annotation:
This is a read-only attribute. Example: The following Code demonstrates that when you move the mouse over the button, a dialog box is displayed, showing "Mouse arrived" <SCRIPT>
Function testmouse (oobject ){
If (oobject. Contains (event. toelement )){
Alert ("Mouse arrived ");
}
}
</SCRIPT>
:
<Button id = obutton onmouseover = "testmouse (this)"> mouse over this. </button>
19. Type
Description:
Event name returned. Syntax:
Event. Type annotation:
The name of an event without a prefix of "on" is returned. For example, the Type returned by the onclick event is click.
Read-only.
20. x
Description:
Returns the x-axis coordinates of the upper-level elements with the position attribute relative to the CSS attribute. If there is no upper-level element with the position attribute in the CSS attribute, the body element is used as the reference object by default. Syntax:
Event. x notes:
If the mouse moves out of the window after an event is triggered, the returned value is-1.
This is a read-only attribute. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.
21. Y
Description:
Returns the Y axis coordinate of the parent element with the position attribute relative to the CSS attribute. If there is no upper-level element with the position attribute in the CSS attribute, the body element is used as the reference object by default. Syntax:
Event. y notes:
If the mouse moves out of the window after an event is triggered, the returned value is-1.
This is a read-only attribute. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.