Javascript中的onkeydown、onkeypress、onkeyup的区别

测试界面如下:
这里写图片描述

测试代码如下:

html代码:

<input type="text" onkeydown="downEvent()" onkeypress="pressEvent()" onkeyup="upEvent()"></br></br>
<input type="label" id="downEvent"></br>
<input type="label" id="pressEvent"></br>
<input type="label" id="upEvent"></br>

js代码:

function downEvent(){
    document.getElementById("downEvent").value="downEvent";
    //alert("downEvent is doing");
}

function pressEvent(){
    document.getElementById("pressEvent").value="pressEvent";
    //alert("pressEvent is doing");
}

function upEvent(){
    document.getElementById("upEvent").value="upEvent";
    //alert("upEvent is doing");
}
</script>

结果:

触发事件的前提:交点在输入框控件上
这里写图片描述

特殊情况:
*三个事件都触发Enter键
*三个事件都不触发Fn键
*三个事件同时存在时,alert只会弹出onkeydown和onkeypress
*只能在onkeydown事件中改变输入字符,如:event.keyCode=65;
*汉字拼音输入的过程只触发onkeydown和onkeyup,如下:
这里写图片描述

三者区别:
执行顺序:onkeydown–>onkeypress–>onkeyup
1. onkeydown:键盘一按下就触发的事件,键盘上任意键都会触发onkeydown()事件。
2. onkeypress:键盘一按下就触发的事件,同onkeydown(除去功能键,如:Esc,Shift,Ctrl..)
3. onkeyup:按键一松开就触发的事件。键盘上任意键都会触发onkeyup()事件。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值