JavaScript键盘事件的个人笔记

上期答疑

1.实现一个方块可以拖拽的小demo

var div1 = document.getElementsByClassName("box1")[0];
function getStyle(elem,prop){
    if(window.getComputedStyle){
        return window.getComputedStyle(elem,null)[prop];
    }else{
        return  elem.currentStyle[prop];//ie兼容
    }
};//前面章节封装的获取元素计算样式，返回字符型
var disY,disX;
div1.onmousedown = function (e){//鼠标按下
    disX = e.pageX - parseInt(getStyle(div1,'left'));
    //event.pageX返回鼠标指针的位置（纯值），相对于文档的左边缘
    disY = e.pageY - parseInt(getStyle(div1,'top'));
    //返回鼠标指针的位置，相对于文档的上边缘
    document.onmousemove = function (e){//鼠标移动
        var event = e || window.event;
        div1.style.left = event.pageX - disX + "px";//设置元素的属性值
        div1.style.top = event.pageY - disY + "px";
    }
    document.onmouseup = function(){
        document.onmousemove = null;//松开后清空onmousemove函数
    }
}

一、键盘事件

keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件。
keyup：按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。
keypress：释放某个键盘键时触发。该事件仅在松开键盘时触发一次。（keypress！+keydown+keyup）
顺序为keydown > keypress > keyup

var input = document.getElementsByTagName('input')[0];
input.onkeydown = function (e){
    console.log(e);
}

二、keydown和keypress的区别

1.keydown监听所有键盘类按键，keypress是字符类按键（ASK码）
2.keydown监听字符类按键不准（例如Aa小写）
event.which 属性返回指定事件上哪个键盘键或鼠标按钮被按下。
键盘事件属性

input.onkeypress = function (e){
    console.log(e.which);
}

三、键盘事件属性

键盘定义了很多属性，如下表所示。利用这些属性可以精确控制键盘操作。

keyCode 和 charCode 属性使用比较复杂，但是它们在实际开发中又比较常用，故比较这两个属性在不同事件类型和不同浏览器中的表现时非常必要的，如下表所示。读者可以根据需要有针对性的选用事件响应类型和引用属性值。

某些键的可用性不是很正确，如 PageUp 和 Home 键等。不过常用功能键和字符键都是比较稳定的，如下表所示。

注：以上图表取自中文网.

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！