Home > Developer > JavaScript

How to Use event in JS (1)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This article describes how to use JS events. Some attributes of events only make sense for specific events. For example, the fromElement and toElement attributes only make sense for onmouseover and onmouseout events.

JS event usage

Event indicates the event status, 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.

The following example checks whether the mouse is clicked on the link. If the shift key is pressed, the link jump will be canceled.

 
 
    
  
  
  1. <HTML> 
    2. 
  
  
  2. <HEAD><TITLE>CancelsLinks</TITLE> 
    3. 
  
  
  3. <SCRIPTLANGUAGESCRIPTLANGUAGE="JScript">...  
    4. 
  
  
  4. functioncancelLink()...{  
    5. 
  
  
  5. if(window.event.srcElement.tagName=="A"&&window.event.shiftKey)  
    6. 
  
  
  6. window.event.returnValue=false;  
    7. 
  
  
  7. }  
    8. 
  
  
  8. </SCRIPT> 
    9. 
  
  
  9. <BODYonclickBODYonclick="cancelLink()"> 
    10. 
  
  
  10.  
    11.

The following example shows the current position of the mouse on the status bar.

 
 
    
  
  
  1. <BODYonmousemoveBODYonmousemove="window.status='X='+window.event.x+  
    2. 
  
  
  2. 'Y='+window.event.y"> 
    3.

Attribute:

 
 
    
  
  
  1. altKey,button,cancelBubble,clientX,clientY,  
    2. 
  
  
  2. ctrlKey,fromElement,keyCode,offsetX,offsetY,  
    3. 
  
  
  3. propertyName,returnValue,screenX,screenY,shiftKey,  
    4. 
  
  
  4. srcElement,srcFilter,toElement,type,x,y 
    5.

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, no matter the mouse status, 0 is returned, such as onclick ).

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 the showSrc () function triggered by event onclick on the upper element body if the shift key is also pressed when onclick is clicked on the image.

 
 
    
  
  
  1. <SCRIPTLANGUAGESCRIPTLANGUAGE="JScript"> 
    2. 
  
  
  2. functioncheckCancel()...{  
    3. 
  
  
  3. if(window.event.shiftKey)  
    4. 
  
  
  4. window.event.cancelBubble=true;  
    5. 
  
  
  5. }  
    6. 
  
  
  6. functionshowSrc()...{  
    7. 
  
  
  7. if(window.event.srcElement.tagName=="IMG")  
    8. 
  
  
  8. alert(window.event.srcElement.src);  
    9. 
  
  
  9. }  
    10. 
  
  
  10. </SCRIPT> 
    11. 
  
  
  11. <BODYonclickBODYonclick="showSrc()"> 
    12. 
  
  
  12.  
    13. 
  
  
  13.  
    14.

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.


This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More