JavaScript外设——键盘事件

2016-12-09 本文已影响0人紫荆峰

0.前言

上一节讲了鼠标事件，现在来说说他的“兄弟”——键盘事件。

1.键盘事件

keydown:按下任意按键触发(持续调用)；
keyup:抬起任意按键触发；
keypress:按下非(ctrl,alt,shift,capsLock,NumLock)(持续调用)
注意：键盘事件是给document设置的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件与键盘事件的event对象</title>
</head>
<body>
    <script type="text/javascript">
        document.onkeydown = function(e) {
            var evt = e || window.event;

            console.log(evt);
            
        };
    </script>
</body>
</html>

效果：

捕获.PNG
altKey是键盘Alt键；
ctrKey是键盘Ctrl键；
keyCode表示的是你所按下的键盘的ASCII码；
shiftKey是键盘Shift键。
我们来测试一下：

document.onkeyup = function(e) {
            var evt = e || window.event;

            console.log(evt);
            console.log(evt.altKey, evt.ctrlKey, evt.shiftKey, evt.keyCode);
        };

document.onkeypress = function(e) {
            var evt = e || window.event;

            console.log(evt);
            console.log(evt.altKey, evt.ctrlKey, evt.shiftKey, evt.keyCode);
        };

效果自行演示，就不一一说明了。

扩展：获取屏幕的宽度和高度

//获取宽度
function $w() {
    return document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
}

//获取高度
function $h() {
    return document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
}

这有一个小例子：
html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件应用小例子</title>
</head>
<body>
    <div id="box" style="width: 100px;height: 100px;background-color: red;position: absolute;left: 1000px;top: 300px" ></div>
    <script type="text/javascript" src="sunckBase.js"></script>
    <script type="text/javascript">
        //按下shift和p使小方块变为黄色，使用上下左右键移动小方块
        
        var jsDiv = document.getElementById("box");

        var speed = 5;

        document.onkeydown = function(e) {
            var evt = e || window.event;

            var str = "p";
            if (evt.shiftKey == true && evt.keyCode == 80) {
                jsDiv.style.backgroundColor = "yellow";
            }


            switch(evt.keyCode) {
                case 37:
                    if (jsDiv.offsetLeft > 0) {
                        jsDiv.style.left = jsDiv.offsetLeft - speed + "px";
                    }
                    break;
                case 38:
                    if (jsDiv.offsetTop > 0) {
                        jsDiv.style.Top = jsDiv.offsetTop - speed + "px";
                    }
                    break;
                case 39:
                    if (jsDiv.offsetLeft + jsDiv.offsetWidth <= $w()) {
                        jsDiv.style.left = jsDiv.offsetLeft + speed + "px";
                    }
                    break;
                case 40:
                    if (jsDiv.offsetTop + jsDiv.offsetHeight <= $h()) {
                        jsDiv.style.top = jsDiv.offsetTop + speed + "px";
                    }
                    break;
            }

        };


        

    </script>
</body>
</html>

sunckBase.js代码如下：

//随机颜色
function randomColor() {
    var r = parseInt(Math.random() * 256);
    var g = parseInt(Math.random() * 256);
    var b = parseInt(Math.random() * 256);

    var colorString = "rgb(" + r + "," + g + "," + b + ")";
    return colorString;
}
//获取内部外部样式表中的样式属性的属性值
// obj--- 元素节点
// name----属性名
function getStyle(obj, name){
    if (obj.currentStyle) {
        return obj.currentStyle[name];
    }else{
        return window.getComputedStyle(obj,null)[name];
    }
}

//设置元素样式属性
//obj--元素节点
//name--样式属性名
//value--样式属性值
function setStyle(obj, name, value) {
    obj.style[name] = value;
}


//获取宽度
function $w() {
    return document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
}

//获取高度
function $h() {
    return document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
}

2.总结

节就这么简单，想必对大家都能够有所帮助，谢谢能够的大家的支持！！！！

JavaScript外设——键盘事件

0.前言

1.键盘事件

2.总结

猜你喜欢

热点阅读