Home > Article > Web Front-end > A complete list of altKey and Event attributes in javascript_javascript skills
A complete list of altKey and Event attributes in javascript_javascript skills
- WBOYOriginal
- 2016-05-16 15:33:391441browse
The following is an introduction to the altkey attribute in JavaScript. The specific introduction is as follows:
Definition and usage of altKey attribute:
This property returns a boolean value. Indicates whether the Alt key was pressed and held when the specified event occurred.
Grammar structure:
event.altKey=true|false|1|0
Browser support:
1.IE browser supports this attribute.
2. Firefox browser supports this attribute.
3. Opera browser supports this attribute.
4. Google Chrome supports this attribute.
Example code:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>javascript的altKey事件属性-蚂蚁部落</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键已经被按下");
}
else{
alert("ALT键没有被按下");
}
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
In the above code, when the specified div is clicked, it will pop up whether the ALT key has been pressed.
Comprehensive list of Event properties in Javascript
Attributes
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.
Syntax: event.altKey
Possible values: TRUE when the alt key is pressed, FALSE otherwise. Read only.
2.button Description: Check the pressed mouse button.
Syntax: event.button
Possible values: 0 No key pressed 1 Press the left button 2 Press the right button 3 Press the left and right buttons 4 Press the middle button 5 Press the left and middle buttons 6 Press the right and middle buttons 7 Press all keys
This property is only used for onmousedown, onmouseup, and onmousemove events. For other events, 0 is returned regardless of the mouse status (such as onclick).
3.cancelBubble Description: Detect whether to accept the event control of the upper element.
Syntax: event.cancelBubble[ = cancelBubble]
Possible values: This is a readable and writable boolean value:
TRUE is not controlled by events of upper elements. FALSE allows control by events of upper-level elements. This is the default value.
Example: The following code snippet demonstrates that when clicking on the image (onclick), if the shift key is also pressed at the same time, the showSrc() function triggered by the onclick event on the upper element (body) is canceled.
<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 coordinate of the mouse in the client area of the window.
Syntax: 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 coordinate of the mouse in the client area of the window.
Syntax: 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.
6.ctrlKey Description: Check the status of the ctrl key.
Syntax: event.ctrlKey
Possible values: TRUE when the ctrl key is pressed, FALSE otherwise. Read only.
7.fromElement Description: Detect the element that the mouse leaves when the onmouseover and onmouseout events occur.
Reference: 18.toElement
Syntax: event.fromElement
Note: This is a read-only property.
8.keyCode Description: Detect the internal code corresponding to keyboard events.
This attribute is used for onkeydown, onkeyup, and onkeypress events.
Syntax: event.keyCode[ = keyCode]
Possible values: This is a readable and writable value that can be any Unicode keyboard code. If no keyboard event was raised, the value is 0 .
9.offsetX Description: Check the horizontal coordinate of the mouse position relative to the object that triggered the event
Syntax: event.offsetX
10.offsetY Description: Checks the vertical coordinate of the mouse position relative to the object that triggered the event
Syntax: event.offsetY
11.propertyName Description: Sets or returns the name of the element's changed property.
Syntax: event.propertyName [= sProperty]
Possible values: sProperty is a string that specifies or returns the name of the property that changed in the event on the element that triggered the event. This property is readable and writable. No default value.
Note: You can get the value of propertyName by using onpropertychange event.
12.returnValue Description: Set or check the value returned from the event
Syntax: event.returnValue[=Boolean]
Possible values: true the value in the event is returned false the default action of the event on the source object is canceled
See the example at the beginning of this article.
13.screenX Description: Detect the horizontal position of the mouse relative to the user's screen
Syntax: 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.
14.screenY Description: Detects the vertical position of the mouse relative to the user's screen
Syntax: 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.
Syntax: event.shiftKey
Possible values: TRUE when the shift key is pressed, FALSE otherwise. Read only.
16.srcElement Description: Returns the element that triggered the event. Read only. See the example at 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: Detect the element that the mouse enters when the onmouseover and onmouseout events occur.
Reference: 7.fromElement
Syntax: event.toElement
Note: This is a read-only property.
19.type Description: Returns the event name.
Syntax: event.type
Note: Returns the event name without "on" as the prefix. For example, the type returned by the onclick event is click read-only.
20. x Description: Returns the x-axis coordinate of the mouse relative to the parent element with the position attribute in the css attribute. If there is no parent element with a position attribute in the css attribute, the default is
Take the BODY element as the reference object.
Syntax: event.x
Note: If the mouse moves out of the window after the event is triggered, the returned value 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 the position attribute in the css attribute.
If there is no parent element with a position attribute in the css attribute, the BODY element will be used as the reference object by default.
Syntax: event.y
Note: If the mouse moves out of the window after the event is triggered, the returned value 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
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills