Js键盘事件与默认行为

键盘事件主要是就是2个

• onkeydown 当键盘按下后触发
• onkeyup 当键盘抬起时触发

onkeydown

e.keyCode:数字类型，键盘按键的值,键值(同样功能的按键,键值一样，例如左侧的ctrl和右侧的ctrl键值相同)

• ctrlKey,shiftKey,altKey事件对象的三个属性都是布尔值

例如 e.ctrlKey == true

• 如果按下不抬起来，则会连续触发
• onkeydown事件触发是在input值获取到之前触发,所以必须利用的是onkeyup

document.onkeydown = function(ev){
    window.alert(ev.keyCode);
}

document.onclick = function(e){
    window.alert(e.ctrlKey);//当按下ctrl点击的时候，弹出true,当没有按下ctrl点击的时候，弹出false
}

onkeyup

当键盘抬起的时候触发

//一般情况用于清空
元素.onkeydown = null;

举例说明:留言板

    //按下ctrl+回车键开始
    document.onkeydown = function(e)
    {
        
        if(e.ctrlKey&&e.keyCode==13)              //判断是不是回车
        {
            hexin();
        }
    }

第二个例子键盘控制div移动

function getStyle(obj,attr)
    {
        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
    }
    document.onkeydown = function(e){
       switch(e.keyCode)
       {
           case 37:
               if(parseInt(getStyle(document.getElementById("div1"),"left"))==0)
               {
                   window.alert("到头了，不能动了");
               }else
               {
                   document.getElementById("div1").style["left"] = (parseInt(getStyle(document.getElementById("div1"),"left"))-10)+"px";
               }
               break;
           case 38:
               if(parseInt(getStyle(document.getElementById("div1"),"top"))==0)
               {
                   window.alert("到头了，不能动了");
               }else
               {
                   document.getElementById("div1").style["top"] = (parseInt(getStyle(document.getElementById("div1"),"top"))-10)+"px";
               }
               break;
           case 39:
               if(parseInt(getStyle(document.getElementById("div1"),"left"))>=(parseInt(document.documentElement.clientWidth)-300))
               {
                   window.alert("到头了，不能动了");
               }else
               {
                   document.getElementById("div1").style["left"] = (parseInt(getStyle(document.getElementById("div1"),"left"))+10)+"px";
               }
               break;
           case 40:
               if(parseInt(getStyle(document.getElementById("div1"),"top"))>=(parseInt(document.documentElement.clientHeight)-300))
               {
                   window.alert("到头了，不能动了");
               }else
               {
                   document.getElementById("div1").style["top"] = (parseInt(getStyle(document.getElementById("div1"),"top"))+10)+"px";
               }
               break;
       }
    }

不是所有的元素都能接受键盘事件，能够响应用户输入的元素才可以，能够接受焦点元素就能够接受键盘事件

事件的默认行为

事件默认行为:当一个事件发生时浏览器自己会做的事情。
阻止默认行为的步骤:

• 当前这个行为是什么事件触发的
• 在这个事件的处理函数中使用return false;

点击后跳转
  //这样的话他不会跳转

默认情况点击空格，滚动条会向下滚动

document.onkeydown = function(){
    return false;  //这样就阻止了点击空格，向下滚动
}
document.oncontextmenu = function(){
   //alert(1);
  return false;
}

oncontextmenu右键菜单事件,当右键菜单显示出来的时候触发

自定义右键菜单