0.前言
上一节讲了鼠标事件，现在来说说他的“兄弟”——键盘事件。
1.键盘事件
- keydown:按下任意按键触发(持续调用)；
- keyup:抬起任意按键触发；
- keypress:按下非(ctrl,alt,shift,capsLock,NumLock)(持续调用)
注意：键盘事件是给document设置的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件与键盘事件的event对象</title>
</head>
<body>
<script type="text/javascript">
document.onkeydown = function(e) {
var evt = e || window.event;
console.log(evt);
};
</script>
</body>
</html>
效果：
捕获.PNG
altKey是键盘Alt键；
ctrKey是键盘Ctrl键；
keyCode表示的是你所按下的键盘的ASCII码；
shiftKey是键盘Shift键。
我们来测试一下：
document.onkeyup = function(e) {
var evt = e || window.event;
console.log(evt);
console.log(evt.altKey, evt.ctrlKey, evt.shiftKey, evt.keyCode);
};
document.onkeypress = function(e) {
var evt = e || window.event;
console.log(evt);
console.log(evt.altKey, evt.ctrlKey, evt.shiftKey, evt.keyCode);
};
效果自行演示，就不一一说明了。
扩展：获取屏幕的宽度和高度
//获取宽度
function $w() {
return document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
}
//获取高度
function $h() {
return document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
}
这有一个小例子：
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件应用小例子</title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background-color: red;position: absolute;left: 1000px;top: 300px" ></div>
<script type="text/javascript" src="sunckBase.js"></script>
<script type="text/javascript">
//按下shift和p使小方块变为黄色，使用上下左右键移动小方块
var jsDiv = document.getElementById("box");
var speed = 5;
document.onkeydown = function(e) {
var evt = e || window.event;
var str = "p";
if (evt.shiftKey == true && evt.keyCode == 80) {
jsDiv.style.backgroundColor = "yellow";
}
switch(evt.keyCode) {
case 37:
if (jsDiv.offsetLeft > 0) {
jsDiv.style.left = jsDiv.offsetLeft - speed + "px";
}
break;
case 38:
if (jsDiv.offsetTop > 0) {
jsDiv.style.Top = jsDiv.offsetTop - speed + "px";
}
break;
case 39:
if (jsDiv.offsetLeft + jsDiv.offsetWidth <= $w()) {
jsDiv.style.left = jsDiv.offsetLeft + speed + "px";
}
break;
case 40:
if (jsDiv.offsetTop + jsDiv.offsetHeight <= $h()) {
jsDiv.style.top = jsDiv.offsetTop + speed + "px";
}
break;
}
};
</script>
</body>
</html>
sunckBase.js代码如下：
//随机颜色
function randomColor() {
var r = parseInt(Math.random() * 256);
var g = parseInt(Math.random() * 256);
var b = parseInt(Math.random() * 256);
var colorString = "rgb(" + r + "," + g + "," + b + ")";
return colorString;
}
//获取内部外部样式表中的样式属性的属性值
// obj--- 元素节点
// name----属性名
function getStyle(obj, name){
if (obj.currentStyle) {
return obj.currentStyle[name];
}else{
return window.getComputedStyle(obj,null)[name];
}
}
//设置元素样式属性
//obj--元素节点
//name--样式属性名
//value--样式属性值
function setStyle(obj, name, value) {
obj.style[name] = value;
}
//获取宽度
function $w() {
return document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
}
//获取高度
function $h() {
return document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
}
2.总结
节就这么简单，想必对大家都能够有所帮助，谢谢能够的大家的支持！！！！
网友评论