js中常用的键盘事件

一、三个常用的键盘事件

1、keydown: 当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件
2、keypress: 当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件
3、keyup: 当用户释放键盘上的键时触发。
这里我们简单的举一个抽奖的例子：

html代码<div id="show">抽奖内容展示</div><div id="btns">      <span id="play">开 始</span>      <span id="stop">停 止</span></div>

show部分用于展示抽奖的结果，play是开始按钮，stop是停止按钮，我们实现抽奖可以使用鼠标的点击事件，也可以使用键盘事件，这里我们使用键盘事件，你也可以用鼠标事件。

     *{        margin: 0;        padding: 0;        }        #show{        width:400px;        height:60px;        margin: 0 auto;        font-size: 18px;        color: red;        padding-top: 20px;        text-align: center;        }        #btns{        width:240px;        height:40px;        margin: 0 auto;        text-align: center;        }        #btns span{        width:80px;        height: 26px;        line-height: 26px;        color: #FFFFFF;        background: #228B22;        border-radius: 7px;        float: left;        margin-left:20px;        margin-right: 20px;        font-size: 14px;        text-align: center;        }

这里是样式文件。

js代码 <script>          var data=["书","小哇","笔","谢谢惠顾","ipad","笔记本"];          var timer=null;          //flag是用来记录按下enter是开始抽奖还是停止抽奖          var flag=0;          var show=document.getElementById('show');          var play=document.getElementById('play');          var stop=document.getElementById('stop');          //这里我们使用keyup事件          document.onkeyup= function(event){            console.log(event.keyCode);            if(event.keyCode==13){              if(flag==0){                playfun();                flag=1;              }else{                stopfun();                flag=0;              }            }      }       function playfun(){        //random()生成（0,1]之内的数，可以取到0但是不会到1.        //每次生成一个计时器之前需要提前清除已经存在的计时器，否则会越来越快。            clearInterval(timer);            timer=setInterval(function(){                var rand=Math.floor(Math.random()*data.length);                show.innerHTML=data[rand];            },50);            play.style.background="#888888";        }        function stopfun(){            clearInterval(timer);            play.style.background="#228B22";        }        </script>

这个js使用计时器和键盘事件实现一个简单的抽奖，抽奖的内容我们保存在数组中。