利用JS实现对键盘的监听

阅读数：3308 发布时间：2016-07-09 21:33:42

作者：w3ljc 标签： js w3ljc

实现原理

通过onkeydown监控键盘的按键，按下键时keyCode则会记录一个ASC码，对应着键盘上的一个键位，再通过比较则可以得出键盘是哪个键被按下。

简要代码

<body>
    <div id="abc"></div>
    <script type="text/javascript">
        window.onkeydown = chang_page;    
        function chang_page() {
            if (event.keyCode == 37 ) document.getElementById("abc").innerHTML += "left ";
            if (event.keyCode == 38 ) document.getElementById("abc").innerHTML += "up ";
            if (event.keyCode == 39 ) document.getElementById("abc").innerHTML += "right ";
            if (event.keyCode == 40 ) document.getElementById("abc").innerHTML += "down ";
        }

      </script>
</body>

通过以上代码即可完成对键盘上下左右的监控，可以通过添加switch判断来进行全键盘的监控

innerHTML与write的区别

在编写过程中起初使用document.write进行输出，但只能进行一次输出，故更换为innerHTML

write是DOM的一个方法，调用时在body中直接写入内容流，会导致页面的重绘，而与write相比innerHTML时DOM的一个属性，使用时会根据值创建新的DOM树替换调用元素原有的子节点，完成独立元素等更改，与write相比更为灵活。而在插入JS时，write都会自动执行JS脚本，而innerHTML在大多数浏览器中都不会自动执行，所以编写时根据情况选择使用。