javascript事件基础--键盘事件

键盘事件包括三个类型：

  keydown:在按下某键时触发     keypress:按下某键并释放时触发   keyup:释放某键时触发

键盘事件的属性：

  keyCode （常用）：键位对应的键值                 charCode（常用）：键位对应的Unicode，仅DOM支持       

 target：事件的节点，仅DOM支持         srcElement:发生事件的元素，仅IE支持

shiftKey 、 ctrlKey、  altKey ： 是否按下 shift  、ctrl、  alt键，如按下返回true，否则返回false

metaKey：是否按下metaKey ，如按下返回true，否则返回false，仅DOM支持

例1：监测Ctrl和Shift是否同时被按下

document.οnclick=function(e){

   var e=e||e.srcElement;

  var  t=e.target||e.srcElement;

  if(e.ctrlKey&&e.shiftKey){//如果同时按下 ctrl shift

            t.parentNode.removeChild(t);  //移除当前元素

         }

}

在标准浏览器下获取键盘按键我们可以使用e.which，但是非标准下没有这个属性，所以大部分情况下用keyCode，但是这是存在兼容性问题的

keyCode和charCode返回值区别

事件类型 keyCode IE DOM charCode IE DOM onkeydown e.keyCode      返回所有键值（除PrintScreen）字母键都以大写状态显示键值（65-90） 返回所有键值（除PrintScreen）字母键都以大写状态显示键值（65-90） e.charCode      不支持 0 onkeyup e.keyCode       返回所有键值（除PrintScreen）字母键都以大写状态显示（65-90） 返回所有键值（除PrintScreen）字母键都以大写状态显示键值（65-90） e.charCode    不支持 0 onkeypress e.keyCode         返回所有字符键的正确值，区分大写状态（65-90）和小写状态（97-122） 功能键返回正确值，而Shift Ctrl Alt PrintScreen ScrollLock无返回值，其他键值都返回0 e.charCode   不支持  返回所有字符键，区分大写状态（65-90）和小写状态（97-122），而Shift Ctrl Alt PrintScreen ScrollLock无返回值，其他键值都返回0

function myFunction(e) {
    e || (e = window.event);
    if(e.which == null){
        e.which = e.charCode != null ? e.charCode : e.keyCode;
    }
}

键位和码值对照表

键位	码值	键位	码值
0~9（数字键）	48~57	A~Z（字母键）	65~90
Backspace（退格键）	8	Tab(制表键)	9
Enter	13	Space（空格）	32
Left  arrow （左箭头）	37	Top arrow	38
Right arrow （右箭头）	39	Down arrow	40

使用方向键控制页面元素的移动效果：

<div id="box"></div>
        <script>
            var box=document.getElementById("box");
            box.style.position="absolute";
            box.style.width="20px";
            box.style.height="20px";
            box.style.backgroundColor="red";
            document.οnkeydοwn=keyDown;
            function keyDown(event){
                var event=event||window.event;
                switch(event.keyCode){
                    case 37:
                      box.style.left=box.offsetLeft-5+"px";
                      break;
                      case 39:
                      box.style.left=box.offsetLeft+5+"px";
                      break;
                      case 38:
                      box.style.top=box.offsetTop-5+"px";
                      break;
                      case 40:
                      box.style.top=box.offsetTop+5+"px";
                      break;
                    
                }
                return false;
                
            }
            
        </script>

 

键盘事件的响应顺序

<textarea id="text" rows="16" cols="26"></textarea>
        <script>
            //对于字符键，键盘事件响应顺序keydown  keypress  keyup，按住不放，keydown  keypress事件将逐个持续发生，直至松开
            //对于非字符键（如功能键和特殊键）keydown  keyup，按住不放，只有keydown事件持续发生，直至松开
            var n=1;
            var text=document.getElementById("text");
            text.οnkeydοwn=f;
            text.οnkeyup=f;
            text.οnkeypress=f;
            function f(e){
                var e=e||window.event;
                text.value+=(n++)+"="+e.type+"(keyCode="+e.keyCode+")\n";
            }
        </script>