JS键盘事件

本文介绍了JavaScript中用于监听键盘事件的onkeyup、onkeydown和onkeypress,详细阐述了它们的区别和应用场景。示例代码展示了如何通过keyCode属性判断用户按下的是哪个键,并提供了事件触发的顺序。在实际开发中,keydown和keyup因能识别所有键而更常用。
摘要由CSDN通过智能技术生成

onkeyup 某个键盘按键被松开时触发

onkeydown 某个键盘按键被按下时触发

onkeypress 某个键盘按键被按下时 触发但是它不识别功能键 比如 ctrl shift 箭头等

案例:

<script>
        // 常用的键盘事件
        //1. keyup 按键弹起的时候触发
        document.addEventListener('keyup', function() {
            console.log('我弹起了');
        })
        //2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头
        document.addEventListener('keydown', function() {
                console.log('我按下了down');
        })
      //3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keypress', function() {
                console.log('我按下了press');
        })
        // 4. 三个事件的执行顺序  keydown -- keypress -- keyup
    </script>

2.键盘事件对象

键盘事件对象属性:keyCode

说明: 返回改建的ASCII值(美国信息交换标准代码)

注意:

keydown 和keyup 不区字母大小写, keypress区分大小写

在实际开发种,更多的使用 keydown 和keyup , 它能识别所有的键(包括功能键)

keypress 不能识别功能键,但是keyCode属性能区分大小写,返回不同的ASCII值。

使用keyCode属性判断用户按下哪个键

e 就是事件对象 (event 或者 evt)

<script>
        document.addEventListener('keyup', function(e) {
            console.log('up:' + e.keyCode);
            if (e.keyCode === 65) {
                alert('您按下的a键');
            }
        })
        document.addEventListener('keypress', function(e) {
            // console.log(e);
            console.log('press:' + e.keyCode);
        })
    </script>



 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值