键盘事件
点击键盘按键后触发键盘事件
代码
//1.keyup 键盘按键弹起
document.addEventListener('keyup', function() {
console.log('弹起');
})
//2.keydown 键盘按键按下
document.addEventListener('keydown', function() {
console.log('按下down');
})
//3.keypress 键盘按键按下
document.addEventListener('keypress', function() {
console.log('按下press');
//4.三个事件的执行顺序 keydown -> keypress -> keyup
})
注意:
- 如果使用addEventListener不需要加on
- onkeypress和前面两个的区别是不识别功能键
- 三个事件的执行顺序 keydown -> keypress -> keyup
键盘事件对象
注意:onkeydown 和 onkeyup 不区分字母大小写,onkeypress区别字母大小写
实际开发更多使用keydown 和 keyup, 他能识别所有的按键(包括功能键)
ASCII表
代码
//键盘事件对象中的keyCode属性可以得到相应按键的ASCII码值
//可以利用keyCode返回的值来判断用户按下了哪个键
document.addEventListener('keyup', function(e) {
console.log('up=' + e.keyCode);
//keyup 和 keydown 不区分字母大小写
if(e.keyCode == 65) {
alert('你按下了a键');
}else {
alert('你没有按下a键');
}
})
document.addEventListener('keypress', function(e) {
console.log('press=' + e.keyCode);
//keypress 事件区分字母大小写
})