实际应用中,我们会遇到监听按键输入和鼠标点击事件,在这里我们进行对鼠标和键盘事件的总结.
Keyboard"color: #ff0000">方法
本接口同样会继承对象父代的方法， UIEvent 和 Event。
- KeyboardEvent.getModifierState()返回一个 Boolean，表示在事件创建时，修改键如Alt ， Shift， Ctrl， Meta等是否按下。
- KeyboardEvent.initKeyEvent()初始化一个 KeyboardEvent 对象。 现在的标准方式是使用 KeyboardEvent() 构造器。
- KeyboardEvent.initKeyboardEvent() 初始化一个 KeyboardEvent 对象。 现在的标准方式是使用 KeyboardEvent() 构造器。
介绍下我们常用的一些属性：
- KeyboardEvent.key
- KeyboardEvent.code
- KeyboardEvent.ctrlKey
- KeyboardEvent.shiftKey
- KeyboardEvent.altKey
- KeyboardEvent.metaKey
KeyboardEvent.ctrlKey | shiftKey | altKey | metaKey 比较简单，表示当你按下键盘的时候，Ctrl | Shift | Alt | meta 按键是否已经被按下。如果已经被按下这些值就是 true，通常我们要运用组合键的判断会用到（譬如：Alt + a）。大家看到 meta 会疑惑这个是哪个键？在 Mac 平台上指的是 command 键（"color: #ff0000">KeyboardEvent.key
如果你按下的按钮所代表的是一个可打印的字符（printed representation），那么这个 key 的值就是这个字符（譬如：a、Enter、Shift、CapsLock、Backspace）。。
KeyboardEvent.code
这个值比较诡异，它表示你按了键盘上的哪个按键。你按 a，code 的值是 KeyA，你按左边的 Shift，code 的值是 ShiftLeft。什么意思呢？就是他表示你按的按键在键盘的哪个位置。这里就有趣了，因为不同语言的键盘同一个键代表的字符可能不同，但是位置是相同的。打个比方：KeyQ 代表的是我们普通键盘q按键。但是呢 Dvorak 键盘q这个位置的按钮代表的不是 q，而是'。所以如果你按同一个按钮，key 的值可能不同，code 的值会相同。
KeyboardEvent.keyCode 只读
返回一个表示系统和实现相关的数字代码的 Number， 用于标识按键的未修改值。
了解了上面属性,我们就可以进行使用代码的方式实时获取输入的键值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件监听</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-top: 20px;
}
table,
table tr th,
table tr td {
border: 1px solid #000;
}
table {
min-height: 25px;
line-height: 25px;
text-align: center;
border-collapse: collapse;
padding: 2px;
}
th {
width: 150px;
}
</style>
<script type="text/javascript" language=JavaScript>
window.onload = function () {
const key = document.getElementById('key');
const keyCode = document.getElementById('keyCode');
const code = document.getElementById('code');
const ctrlKey = document.getElementById('ctrlKey');
const metaKey = document.getElementById('metaKey');
const shiftKey = document.getElementById('shiftKey');
const altKey = document.getElementById('altKey');
const combineKey = document.getElementById('combineKey');
document.onkeydown = function(event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
e.preventDefault(); //阻止默认事件
// 设置获取的值
key.innerHTML = e.key;
keyCode.innerHTML = e.keyCode;
code.innerHTML = e.code;
ctrlKey.innerHTML = e.ctrlKey;
metaKey.innerHTML = e.metaKey;
shiftKey.innerHTML = e.shiftKey;
altKey.innerHTML = e.altKey;
if (e.altKey || e.shiftKey || e.metaKey || e.ctrlKey) {
let result = '';
if (e.altKey) {
result = 'Alt';
} else if (e.shiftKey) {
result = 'Shift';
} else if (e.metaKey) {
result = 'Meta';
} else if (e.ctrlKey) {
result = 'Control';
}
combineKey.innerHTML = result !== e.key "container">
<table border="0px">
<tr>
<th>key</th>
<th>keyCode</th>
<th>code</th>
<th>ctrlKey</th>
<th>metaKey</th>
<th>shiftKey</th>
<th>altKey</th>
<th>组合健</th>
</tr>
<tr>
<td id="key">-</td>
<td id="keyCode">-</td>
<td id="code">-</td>
<td id="ctrlKey">-</td>
<td id="metaKey">-</td>
<td id="shiftKey">-</td>
<td id="altKey">-</td>
<td id="combineKey">-</td>
</tr>
</table>
<hr />
</div>
</body>
</html>
显示结果如下:
当我们在键盘上输入键值时,会有相应的属性显示,也可以点击该链接实时尝试:
See the Pen keyboardEvent by suwu150 (@suwu150) on CodePen.
Mouse"htmlcode">
效果如下: 可参见以下链接进行操作: See the Pen MouseEvent by suwu150 (@suwu150) on CodePen. 常见键值 参考链接: 1.https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件监听</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-top: 20px;
}
table,
table tr th,
table tr td {
border: 1px solid #000;
}
table {
min-height: 25px;
line-height: 25px;
text-align: center;
border-collapse: collapse;
padding: 2px;
}
th {
width: 130px;
}
</style>
<script type="text/javascript" language=JavaScript>
function doNothing(){
window.event.returnValue=false;
return false;
}
window.onload = function () {
const button = document.getElementById('button');
const buttons = document.getElementById('buttons');
const clientX = document.getElementById('clientX');
const clientY = document.getElementById('clientY');
const ctrlKey = document.getElementById('ctrlKey');
const metaKey = document.getElementById('metaKey');
const shiftKey = document.getElementById('shiftKey');
const altKey = document.getElementById('altKey');
const which = document.getElementById('which');
const combineKey = document.getElementById('combineKey');
document.onmousedown = function(event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
e.preventDefault(); //阻止默认事件
// 设置获取的值
button.innerHTML = e.button;
buttons.innerHTML = e.buttons;
clientX.innerHTML = e.clientX;
clientY.innerHTML = e.clientY;
ctrlKey.innerHTML = e.ctrlKey;
metaKey.innerHTML = e.metaKey;
shiftKey.innerHTML = e.shiftKey;
altKey.innerHTML = e.altKey;
which.innerHTML = e.which;
function getButton(value) {
let buttonname = '';
if (value === 0) buttonname = '鼠标左键';
if (value === 1) buttonname = '鼠标中间键';
if (value === 2) buttonname = '鼠标右键';
return buttonname;
}
if (e.altKey || e.shiftKey || e.metaKey || e.ctrlKey) {
let result = '';
if (e.altKey) {
result = 'Alt';
} else if (e.shiftKey) {
result = 'Shift';
} else if (e.metaKey) {
result = 'Meta';
} else if (e.ctrlKey) {
result = 'Control';
}
combineKey.innerHTML = `${result} + ${getButton(e.button)}`;
} else {
combineKey.innerHTML = getButton(e.button);
}
};
}
</script>
</head>
<body oncontextmenu="doNothing()">
<div id="container">
<table border="0px">
<tr>
<th>button</th>
<th>buttons</th>
<th>clientX</th>
<th>clientY</th>
<th>ctrlKey</th>
<th>metaKey</th>
<th>shiftKey</th>
<th>altKey</th>
<th>which</th>
<th>组合健</th>
</tr>
<tr>
<td id="button">-</td>
<td id="buttons">-</td>
<td id="clientX">-</td>
<td id="clientY">-</td>
<td id="ctrlKey">-</td>
<td id="metaKey">-</td>
<td id="shiftKey">-</td>
<td id="altKey">-</td>
<td id="which">-</td>
<td id="combineKey">-</td>
</tr>
</table>
<hr />
</div>
</body>
</html>
2.https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/ctrlKey