onkeydown和onkeypress的区别
本文由 小茗同学 发表于 2016-09-02 浏览(1262)
最后修改 2017-11-01 标签:onkeydown onkeypress 区别 javascript

原文写于:20150121

正文

二者区别大着呢。

首先,从名字上就可以看出一些区别:keydown意指键盘被按下触发,keyup意指键盘松开被触发,keypress则是按键被按压,keydownkeyup容易区分,但是keydownkeypress啥区别呢?

keydown和keypress的区别

区别:

  1. 执行顺序不同:keydown < keypress < keyup ;
  2. keypress只能监听字母和数字,不能监听一些特殊按键(如Ctrl、Shift、箭头等);
  3. keydown捕获的键值不区分字母大小写,而keypress区分,例如,直接按下A键,keydown打印65,keypress打印97,当Caps打开时,keydownkeypress都是打印65;
  4. keydownkeypress如果不松开会一直触发,keyup会直到松开才会触发;

这里补充说明一点,keypress在谷歌和IE无法监听上下左右箭头,但是火狐不按常规出牌,可以监听。

测试代码:

document.onkeydown = function(e)
{
	console.log('onkeydown:', e.keyCode);
};
document.onkeyup = function(e)
{
	console.log('onkeyup:', e.keyCode);
};
document.onkeypress = function(e)
{
	console.log('onkeypress:', e.keyCode);
};

测试结果:

再次总结

  • onkeydown是在用户按下任何键盘键(包括系统按钮,如箭头键和功能键)时发生;
  • onkeyup 是在用户放开任何键盘键时发生;
  • onkeypress是在用户按下并放开任何字母数字键时发生。系统按钮(例如,箭头键和功能键)不会触发;