js常用的键盘事件有哪些(用法示例)_键码keyCode对照表

目录

• 一、键盘事件属性
• 示例1
• 示例2
• 键盘响应顺序
• 示例
• 键盘键码keyCode对照表

    document.onclick = function (e) {
        var e = e || window.event;  //标准化事件对象
        var t = e.target || e.srcElement;  //获取发生事件的元素，兼容IE和DOM
        if (e.ctrlKey && e.shiftKey) {  //如果同时按下Ctrl和Shift键
            t.parentNode.removeChild(t);  //移出当前元素
        }
    }

<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.onkeydown = keyDown;
    //在Document对象中注册keyDown事件处理函数
    function keyDown(event){  // 方向键控制元素移动函数
        var event = event || window.event;  // 标准化事件对象
        switch(event.keyCode){  // 获取当前按下键盘键的编码
            case 37 :  // 按下左箭头键，向左移动5个像素
                box.style.left = box.offsetLeft - 5  + "px";
                break;
            case 39 :  // 按下右箭头键，向右移动5个像素
                box.style.left = box.offsetLeft + 5 + "px";
                break;
            case 38 :  // 按下上箭头键，向上移动5个像素
                box.style.top = box.offsetTop  - 5 + "px";
                break;
            case 40 :  // 按下下箭头键，向下移动5个像素
                box.style.top = box.offsetTop  + 5 + "px";
                break;
        }
        return false
    }
</script>

<textarea id="text" cols="26" rows="16"></textarea>
<script>
    var n = 1;  // 定义编号变量
    var text = document.getElementById("text");  // 获取文本区域的引用指针
    text.onkeydown = f;  // 注册keydown事件处理函数
    text.onkeyup = f;  // 注册keyup事件处理函数
    text.onkeypress = f;  // 注册keypress事件处理函数
    function f(e){  // 事件调用函数
        var e = e || window.event;  // 标准化事件对象
        text.value += (n++) + "=" + e.type +"  (keyCode=" + e.keyCode + ")\n";
        //捕获事件响应信息
    }
</script>