【javascript基础】keypress keydown keyup的区别
2012-11-13 11:02 sniper007 阅读(479) 评论(0) 编辑 收藏 举报KeyDown：在控件有焦点的情况下按下键时发生。
KeyPress：在控件有焦点的情况下按下键时发生。(下面会说和KeyDown 的区别)
KeyUp：在控件有焦点的情况下释放键时发生。
二、促发的顺序：
-
KeyDown
-
KeyPress
-
KeyUp
<script type="text/javascript">
function $(str){
return document.getElementById(str);
}
$("wrap")["onkeyup"] = function(){
console.log("促发的是keyup");
console.warn("-------------------------------------");
};
$("wrap")["onkeypress"] = function(){
console.log("促发的是keypress");
};
$("wrap")["onkeydown"] = function(){
console.log("促发的是keydown");
};
</script>
三、三者之间的区别：
KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键）
demo:
下面的例子就测试下大小写，其他的可以自己测试，我前后输入大小写的q、Q，结果如下图，keypress区分大小写，并且通过charCode反应出来，keydown,keyup不区分大小写，前后keyCode都一样
<script type="text/javascript">
function $(str){
return document.getElementById(str);
}
$("wrap")["onkeyup"] = function(event){
event = event || window.event;
console.info(event);
console.log("促发的是keyup");
console.warn("-------------------------------------");
};
$("wrap")["onkeypress"] = function(event){
event = event || window.event;
console.info(event);
console.log("促发的是keypress");
};
$("wrap")["onkeydown"] = function(event){
event = event || window.event;
console.info(event);
console.log("促发的是keydown");
};
</script>
2.KeyPress 只能捕获单个字符KeyDown 和KeyUp 可以捕获组合键。
3.KeyPress 可以捕获单个字符的大小写(详见第一个区别)
4.KeyDown和KeyUp 对于单个字符捕获的KeyValue 都是一个值，也就是不能判断单个字符的大小写。
5.KeyPress 不区分小键盘和主键盘的数字字符。KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。
我依次按主键盘1，小键盘1，区别如下
6.其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。
补充知识：键码、字符编码概念
键码：在发生keydown和keyup事件时，event对象的keyCode属性中会包含一个代码，与键盘上的一个特定的键相对应。对数字字母符键，keyCode属性的值与ASCII码中对应小写字母或者数字的编码相同。 因此，数字键7的keyCode的值为55，而字母A的keyCode的值是65，与shift键无关，DOM和IE的event对象都支持keyCode属性。
注意点：
1、在firefox和opera中，分号的keyCode为59，就是ASCII编码，但IE、safari返回186，即键盘中按键的键码。
2、在safari3之前的版本中，上、下、左、右箭头和上、下翻页键返回大于63000的值。
3、在opera9.5之前的版本中，会将非数字字母键的keyCode设置为等于相应字符的ASCII的编码，因此小于键返回44而不是188.这会影响到能产生一个非数字字母字符的所有键。
4、在safari3之前的版本中，不会因为按下制表、上档、控制或者替代键而促发keydown和keyup事件。
字符编码：
发生keypress事件意味着按下的键会影响到屏幕中文本的显示。
firefox,chrome,safari的event对象都支持一个keyCode的属性，这个属性只有在发生keypress事件时才包含值，而且这个值是按下的那个键所代表字符的ASCII的值。此时的keyCode等于0或者键的码值。IE和opera则是在keyCode中保存字符的ASCII编码。所以，兼容各种浏览器，代码如下：
var ret;
typeof event.charCode == "number" ? ret = event.charCode : ret = event.keyCode;
return ret;
}
参考文档：
http://blog.sina.com.cn/s/blog_5e3a1bbb0100esv3.html
《javascript高级程序设计》第2版，第十二章事件 12.4.3键盘事件
