Of Stack

altKey and Event attribute daemons in javascript

  • 2020-10-07 18:33:51
  • OfStack

The altkey attribute in javascript is introduced as follows:

Definition and usage of altKey attributes:

This property returns 1 Boolean value. Indicates whether the Alt key was pressed and held when the specified event occurred.

Grammatical structure:

event.altKey=true|false|1|0

Browser support:

1.IE browser supports this property.

2. Firefox supports this property.

3.Opera browser supports this property.

4. Google browser supports this property.

Example code: 


<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" /> 
<title>javascript the altKey Event attributes - The ant tribe </title>
<style type="text/css">
div{
 width:200px;
 height:100px;
 background-color:#639;
 margin:0px auto;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 mydiv.onmousedown=function (event){
  if(event.altKey==1){
   alert("ALT The key has been pressed ");
  }
  else{
   alert("ALT The key is not pressed ");
  }
 }
}
</script>
</head>
<body>
 <div id="mydiv"></div>
</body>
</html>

In the above code, when you click the specified div, you can pop up whether the ALT key has been pressed.

Event attributes in Javascript

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 alt key.

Grammar: event altKey

Possible values: When the alt key is pressed, the value is TRUE; otherwise, FALSE. Read-only.

2.button description: Check the mouse button pressed.

Grammar: event button

Possible values: 0 No keys 1 left key 2 right key 3 left key 4 middle key 5 Left and middle key 6 right and middle key 7 all keys
This property is only used for onmousedown, onmouseup, and onmousemove events. For other events, 0 is returned regardless of the mouse state (such as onclick).

3.cancelBubble description: Check whether the upper element is accepted by the event control.

Grammar: event.cancelBubble[= cancelBubble]

Possible value: This is a read-write Boolean value:

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 snippet demonstrates that when clicking (onclick) on an image, if the shift key is also pressed, the showSrc() function raised by the event onclick on the upper element (body) is cancelled. 


<SCRIPT type="text/javascript"> 
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()"> 
<IMG onclick="checkCancel()" src="/sample.gif">

4.clientX description: returns the X coordinates of the mouse in the client area of the window.

Grammar: event clientX

Note: This is a read-only property. 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 coordinates of the mouse in the client area of the window.

Grammar: event clientY
Note: This is a read-only property. 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.

ctrlKey description: Check the status 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 description: Detects the elements left by the mouse when the onmouseover and onmouseout events occur.

Reference: 18 toElement

Grammar: event fromElement

Note: This is a read-only property.

8.keyCode description: Detects the internal code corresponding to the keyboard event.

This property is used for onkeydown, onkeyup, and onkeypress events.

Grammar: event.keyCode[= keyCode]

Possible value: This is a read-write value and can be any 1 Unicode keyboard code. If no keyboard event is raised, the value is 0.

9.offsetX description: Check the horizontal coordinates of the mouse position relative to the object that triggered the event

Grammar: event offsetX

10.offsetY description: Checks the vertical coordinates of the mouse position relative to the object that triggered the event

Grammar: event offsetY

propertyName description: Sets or returns the name of the changed attribute of the element.

Grammar: event.propertyName [= sProperty]

Possible values: sProperty is a string that specifies or returns the name of an attribute that changed in the event for the element that triggered the event. This property is read-write. No default values.

Note: You can get the value of propertyName by using the onpropertychange event.

returnValue description: Sets or checks the value returned from the event

Grammar: event.returnValue[= Boolean]

Possible values: The value in the true event is returned by the default operation of the event on the false source object canceled
See the example at the beginning of this article.

screenX description: Detects the horizontal position of the mouse relative to the user's screen

Grammar: event screenX

Note: This is a read-only property. 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.

screenY description: Detects the vertical position of the mouse relative to the user's screen

Grammar: event screenY

Note: This is a read-only property. 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.

Grammar: event shiftKey
Possible values: When the shift key is pressed, the value is TRUE; otherwise, FALSE. Read-only.

srcElement description: returns the element that triggered the event. Read-only. See the beginning of this article for an example.

Grammar: event srcElement

srcFilter description: returns the filter that triggered the onfilterchange event. Read-only.

Grammar: event srcFilter

18.toElement description: detects the elements entered by the mouse when the onmouseover and onmouseout events occur.

Reference: 7. fromElement

Grammar: event toElement
Note: This is a read-only property.

type description: returns the event name.

Grammar: event type
Note: Returns the event name without the prefix "on". For example, type returned by an onclick event is click read-only.

20. x description: returns the x axis coordinates of the mouse relative to the parent element with the position attribute in the css attribute. If there is no parent element with an position attribute in the css attribute, default

Use the BODY element as a reference object.

Grammar: event x

Note: If the event is triggered and the mouse is moved out of the window, 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 you cannot use it to change the position of the mouse.

21. y description: returns the y axis coordinate of the mouse relative to the parent element with position attribute in css attribute.

If there is no parent element with an position attribute in the css attribute, the BODY element is used as the reference object by default.

Grammar: event y

Note: If the event is triggered and the mouse is moved out of the window, 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 you cannot use it to change the position of the mouse.

Related articles: