前言
在JavaScript中,当用户操作键盘时,会触发键盘事件,通过键盘触发事件,类似用户的行为:
- keydown: 在键盘上按下某个键时触发。如果按住某个键,会不断触发该事件,但是Opera浏览器不支持这种连续操作。该事件处理函数返回false时,会取消默认的动作(如输入的键盘字符,在IE和Safari浏览器下还会禁止keypress事件响应).
- keypress: 按下某个键盘键并释放时触发。如果按住某个键,会不断触发该事件。该事件处理函数返回false时,会取消默认的动作(如输入的键盘字符).
- keyup: 释放某个键盘键时触发。该事件仅在松开键盘时触发一次,不是一个连续的响应状态。
当获取用户正按下建码时,可以使用keydown、keypress和keyup事件获取这些信息。其中keydown和keypress事件基本上是同义事件,它们的表现也完全一致,不过一些浏览器不允许使用keypress事件获取按键信息。所有元素都支持键盘事件,但键盘事件多被应用在表单输入中。
键盘事件
属性 | 描述 |
---|---|
onkeydown | 当按下按键时运行脚本。 |
onkeyup | 当松开按键时运行脚本。 |
onkeypress | 当按下并松开按键时运行脚本。 |
键盘事件定义的属性:
属性 | 说明 |
keyCode | 该属性包含键盘中对应键位的键值 |
charCode | 该属性包含键盘中对应键位的Unicode编码,仅DOM支持 |
target | 发生事件的节点(包含元素),仅DOM支持 |
srcElement | 发生事件的元素,仅IE支持 |
shiftKey | 是否按下Shift键,如果按下返回true,否则为false |
ctrlKey | 是否按下Ctrl键,如果按下返回true,否则为false |
altKey | 是否按下Alt键,如果按下返回true,否则为false |
metaKey | 是否按下Meta键,如果按下返回true,否则为false,仅DOM支持 |
一、键盘按键事件案例
当键盘按下判断当前的按键是不是 a ,如果是就输出true,否则输出false
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例一</title>
</head>
<body>
<script>
/* 当键盘按下判断当前的按键是不是 a ,如果是就输出true,否则输出false */
window.onkeydown = function (event) {
/* 解决兼容性问题 */
event = event || window.event;
if (event.keyCode == 65) {
console.log("true");
} else {
console.log("false");
}
};
</script>
</body>
</html>
二、div方向移动案例
键位和码值对照表
键位 | 码值 | 键位 | 码值 |
0~9(数字键) | 48~57 | A~Z(字母键) | 65~90 |
Backspace(退格键) | 8 | Tab(制表键) | 9 |
Enter(回车键) | 13 | Space(空格键) | 32 |
Left arrow(左箭头键) | 37 | Top arrow(上箭头键) | 38 |
Rigth arrow(右箭头键) | 39 | Down arrow(下箭头键) | 40 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background: red;position: absolute;"></div>
<script>
var box = document.getElementById("box");
//为document绑定一个按键按下的事件
document.onkeydown = function (event) {
event = event || window.event;
// 定义移动速度
var speed = 10;
// 选择移动方向
switch (event.keyCode) {
case 37:
box.style.left = box.offsetLeft - speed + "px";
break;
case 39:
box.style.left = box.offsetLeft + speed + "px";
break;
case 38:
box.style.top = box.offsetTop - speed + "px";
break;
case 40:
box.style.top = box.offsetTop + speed + "px";
break;
}
};
</script>
</body>
</html>
三、拓展知识:
当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数。
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标的状态。
在IE8中,响应函数被触发时,浏览器不会传递事件对象,在IE8及以下的浏览器中,是将事件对象作为window对象的属性保存的。
解决事件对象的兼容性问题:event = event || window.event;