js按键上下左右按键触发函数的写法（按键按下触发）

最新推荐文章于 2024-11-13 01:18:00 发布

weixin_44354089

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量1.5k

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44354089/article/details/106457867

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

onkeydown事件，按键按下触发

function onKeyDown() {
        document.onkeydown = function (event) {
            var event = event || window.event;
            // 为了方便理解可以写成这种形式var event=event?event:window.event实现浏览器的兼容
            var keycode = event.which || event.keyCode;
            // 火狐不支持event.keyCode支持event.which
            switch (keycode) {
                case 38:
                    console.log("上"); break;
                case 39:
                    console.log("右");  break;
                case 40:
                    console.log("下");  break;
                case 37:
                    console.log("左");  break;
            }
         }
    }

Window是浏览器对象，所有浏览器都支持该对象

Document对象是HTML DOM Document对象，每个载入浏览器的html文档都会成为document对象，通过document对象对html中的元素进行访问

Event对象是HTML DOM Document对象，代表事件的状态,如按键的状态

以上在vscode上测试未发现问题，但是最近在webstrom上测试时就发现会报event.which已弃用，可用event.key替代

function onKeyDown() {
        document.onkeydown = function (event) {
            var event = event || window.event;
            // 为了方便理解可以写成这种形式var event=event?event:window.event实现浏览器的兼容
            var keycode = event.key;
            switch (keycode) {
                case 'ArrowUp':
                    console.log("上"); break;
                case 'ArrowRight':
                    console.log("右");  break;
                case 'ArrowDown':
                    console.log("下");  break;
                case 'ArrowLeft':
                    console.log("左");  break;
            }
         }
    }