Home > Developer > JavaScript
Event objects in Javascript
Window. evet indicates that the event represents the event state, such as the element that triggers the event object, the location and status of the mouse, and the key to be pressed.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.
Example
The following example checks 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">
Attribute:
Altkey, button, cancelbubble, clientx, clienty, ctrlkey, fromelement, keycode,
Offsetx, offsety, propertyname, returnvalue, screenx, screeny, shiftkey,
Srcelement, srcfilter, toelement, type, X, Y
--------------------------------------------------------------------------------
1. altkey
Description:
Check the status of the Alt key.
Syntax:
Event. altkey
Possible values:
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:
Event. Button
Possible values:
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 parent layer.
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
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.
5. clienty
Description:
Returns the Y coordinate of the mouse in the client area of the window.
Syntax:
Event. clienty
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.
6. ctrlkey
Description:
Check the status of the ctrl key.
Syntax:
Event. ctrlkey
Possible values:
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. Reference: 18. toelement
Syntax:
Event. fromelement
Note:
This is a read-only attribute.
8. keycode
Description:
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:
Checks the horizontal coordinates of the mouse position relative to the trigger event object.
Syntax:
Event. offsetx
10. offsety
Description:
Check the vertical coordinates of the mouse position relative to the trigger event object
Syntax:
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 returned from the event
Syntax:
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 examples, see the beginning of this article.
13. screenx
Description:
Detects the horizontal position of the mouse relative to the user's screen
Syntax:
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:
Detect the vertical position of the mouse relative to the user's screen
Syntax:
Event. screeny
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.
15. shiftkey
Description:
Check the status of the shift key.
Syntax:
Event. shiftkey
Possible values:
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
Note:
This is a read-only attribute.
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 onmouseover = "testmouse (this)"> mouse over this. </button>
19. Type
Description:
Event name returned.
Syntax:
Event. Type
Note:
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
Note:
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
Note:
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.
Bytes ----------------------------------------------------------------------------------------------------------------------------
IE, event object in Firefox
Event Represents the status of an event and is responsible for event processing. Its Attributes and methods can help us complete many operations that interact with users;
I. main attributes and methods of event objects
1. type: the type of the event, which is a string without the "on" prefix in the HTML Tag attribute. For example, "click" indicates the click event.
2. srcelement: The Event source, which is the element of the event. For example, <a onclick = "check ()"> </a> A is the source of the event, that is, the srcelement of the event. (Target is not used in IE)
3. Button: Declares the mouse key pressed, which is an integer. 0 indicates no buttons, 1 indicates the left mouse button, 2 indicates the right mouse, and 4 indicates the middle mouse key. If you press Multiple mouse keys, add these values together, so 3 indicates that the left and right keys are pressed simultaneously.
4. clientx/clienty: refers to the horizontal and vertical coordinates of the mouse when an event occurs. The return value is an integer. Their values are generated relative to the upper left corner of the inclusive window.
5. offsetx/offsety: the position of the mouse pointer relative to the source element. You can determine which pixel of the image object to click.
6. altkey, ctrlkey, and shiftkey: as the name suggests, these attributes indicate whether ALT, Ctrl, or shift keys are simultaneously held when a mouse event occurs, and a Boolean value is returned.
7. keycode: return the code of the key and the Unicode characters of the keypress event when the keydown and keyup events occur. For example, event. keycode = 13 indicates that the Enter key is pressed;
8. fromelement and toelement refer to the document elements that the Mouseover event has moved, and the former refer to the document elements that the mouse moves to in the mouseout event.
9. cancelbubble: A boolean attribute. When it is set to true, the Stop event is further flushed to an element of the inclusion level, which is used to detect whether the event control of the upper layer element is accepted. True indicates that the event is not controlled by the upper element, and false indicates that the event is allowed by the upper element.
10. returnvalue: A boolean attribute. When it is set to false, it can prevent the browser from executing the default event action, which is equivalent to <a href = "#" onclick = "processmethod (); Return false; "/>.
11. attachevent () and detachevent ()
Method: You can register multiple event handlers for the DOM object event type. They have two parameters: the first is the event type, and the second is the event handler. In attachevent () event
During execution, this keyword points to the window object, rather than the event element.
Ii. Description of the IE event object
The event object is a global attribute.
In IE, you cannot pass the event object as a parameter to the event handler. You can only use window. event or event to reference the event object. In IE, event is an attribute of window, that is, event is a global variable, which provides the event details.
Iii. Concepts of event bubbles
Blister of events in IE: Events in IE can bubble up to the upper layer a little along the tolerance level, that is, down
The Dom node of the layer defines the event handler function. If there is another event handler function of the same event type as the lower layer at the upper layer, the upper layer will also execute the event handler function. Example
For example, the <div> label contains <A>. If both labels have
The onclick event processing function executes the onclick event processing function of the <A> tag first, and then the <div> event processing
Function. If you do not want to execute the onclick event processing function at the upper layer after the <A> event processing function is executed
Set cancelbubble to false.
4. W3C Dom standard event
Unlike IE, W3C
The event object in Dom is not an attribute under the window global object. In other words, event is not a global variable. Generally, in the DOM Level 2 standard, event is used as the event
The attributes of the Document Object. The event contains two sub-interfaces: uievent and mutationevent. These sub-interfaces implement all the methods and attributes of the event.
The mouseevent interface is a sub-interface of uievent, so all methods and attributes of uievent and event are implemented. Next, let's look at the event,
Main attributes and methods of uievent and mouseevent.
1. Event
Type: event type, similar to IE, but with no "on" prefix. For example, if you click an event, it is only "click ".
Target: the node where the event occurs.
Currenttarget: the node where an event is being processed. It may be the node pointed to by the target attribute, or it may point to the parent node of the target node due to capture or blister.
Eventphase: Specifies the stage of event propagation. Is a number.
Timestamp: the time when the event occurred.
Bubbles: indicates whether the event is blister.
Cancelable: Specifies whether the event can use the preventdefault () method to cancel the default action.
Preventdefault () method: cancels the default action of an event;
Stoppropagation () method: Stop event propagation.
2. uievent
View: Window object in which an event occurs.
Detail: provides additional information about events. Click events, mousedown events, and mouseup events indicate the number of clicks.
3. mouseevent
Button: A number indicating the status of the mouse key in the mousedown, mouseup, and click events. It is similar to the button attribute in IE, but the number indicates a different meaning, and 0 indicates the left button, 1 indicates the intermediate key, and 2 indicates the right-click Key.
Altkey, ctrlkey, shiftkey, and metakey: The same as IE, but IE does not have the last one.
Clientx,
Clienty: it has the same meaning as IE, but in the DOM standard, the two attribute values do not consider the scrolling of the document. That is to say, no matter where the document is rolled, as long as the event occurs on the top left of the window
Clientx and clienty are both 0. Therefore, in IE, to obtain the coordinates of an event, add
Document. Body. scrollleft and document. Body. scrolltop.
Screenx and screeny: the position of the mouse pointer relative to the upper left corner of the monitor. If you want to open a new window, these two attributes are very important.
Relatedtarget: similar to fromelement and toelement in IE, other events have no significance except for Mouseover and mouseout.
Bytes -----------------------------------------------------------------------------------------------------------------------
Only text boxes with numbers can be entered:
<SCRIPT>
Function jhshnumbertext ()
{
If (! (Window. event. keycode> = 48) & (window. event. keycode <= 57 ))
| (Window. event. keycode = 13) | (window. event. keycode = 46)
| (Window. event. keycode = 45 )))
{
Window. event. keycode = 0;
}
}
</SCRIPT>
Only text boxes with Chinese characters can be entered:
<Script language = "JavaScript">
Function onlychinese ()
{
If (window. event. keycode> = 32) & (window. event. keycode <= 126 ))
{
Window. event. keycode = 0;
}
}
</SCRIPT>
Only an input box that can enter characters between 0-9 and T-Z
<SCRIPT>
Function jhshnumbertext ()
{
If (! (Window. event. keycode> = 48) & (window. event. keycode <= 57 ))
| (Window. event. keycode = 13) | (window. event. keycode = 46)
| (Window. event. keycode = 45) | (window. event. keycode> = 84)
& (Window. event. keycode <= 90 ))))
{
Window. event. keycode = 0;
Alert ("enter a character between 0-9 and T-Z... ");
}
}
</SCRIPT>
From: http://hi.baidu.com/windbellxy/blog/item/10ad87253d679220d5074223.html
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
