键盘事件： keydown、keypress、keyup
<script>
/*
对鼠标事件的支持主要遵循是DOM0级
keydown:当用户按下键盘的任意键时触发，而且如果按下不放，会重复触发此事件
keypress:当用户按下键盘的字符键时触发，而且如果按住不放的话，会重复触发字事件
keyup:当用户释放键盘时触发
*/
// 显示键码
var input = document.getElementById('input');
input.onkeyup = function(event){
var event = event || window.event;
console.log(event.keyCode);
}
// 显示字符编码
/*
keypress事件意味着按下的键会影响屏幕中文本的显示
IE9+,Firefox,chrome,Safari的event对象都支持charCode属性，而IE8-,Opera则是在keyCode属性中保存字符的ASCII编码，
所以想要跨浏览器的方式获取字符的编码，先检测charCode属性是否可用，如果不可用则使用keyCode属性
*/
input.onkeypress = function(event){
var event = event || window.event;
if( event.charCode )
{
console.log(event.charCode);// IE9+,Firefox,chrome,Safari
}
else{
console.log(event.keyCode);// IE8-,Opera
}
}
</script>
案例
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>键盘控制小方块运动</title>
<style>
button{
width: 100px;
height: 50px;
background: linear-gradient(to left, #999 0%,#ffcccc 100%);
border: none;
border-radius: 5px;
outline: none;
font-size: 18px;
color: #fff;
}
div{
width: 100px;
height: 100px;
margin-top: 10px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<button id="btn">加速</button>
<div></div>
</body>
</html>
<script>
var btn = document.getElementById('btn');
var div = document.getElementsByTagName('div')[0];
var speed = 5;
document.onkeydown = function(event){
var event = event || window.event;
switch(event.which)// 与event.keyCode|| event.charCode相似
{
case 37:
div.style.left = div.offsetLeft - speed +'px';
break;
case 38:
div.style.top = div.offsetTop - speed + 'px';
break;
case 39:
div.style.left = div.offsetLeft + speed +'px';
break;
case 40:
div.style.top = div.offsetTop + speed + 'px';
break;
}
}
</script>
![两个简单原生js小案例(点击弹出图层 + 全屏弹幕效果)[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)