常用的键盘事件 JavaScript

常用的键盘事件

事件除了使用鼠标触发，还可以使用键盘触发

注意：

1. 如果使用addEventListener 不需要加 on
2. onkeypress和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等
3. 三个事件的执行顺序是：keydown – keypress – keyup

// 常用的键盘事件
// 1.keyup 按键弹起的时候触发
// document.onkeyup = function() {
	// console.log('我弹起了');
// }
document.addEventListener('keyup', function() {
    console.log('我弹起了');
});

// 3. keypress 按键按下的时候触发 不能识别功能键 比如：ctrl shift 左右箭头等
document.addEventListener('keypress', function() {
    console.log('我按下了press');
});

// 2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头等都能识别
document.addEventListener('keydown', function() {
    console.log('我按下了down');
});
// 4. 三个事件的执行顺序  keydown -- keypress -- keyup

键盘事件对象

**注意：**onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写

在实际开发中，更多的使用keydown和keyup，它能识别所有的键（包括功能键）

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

// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
// 1. 我们的keyup 和keydown事件不区分字母大小写 a 和 A 得到的都是65
document.addEventListener('keyup', function(e) {
    // console.log(e);
    console.log('up:' + e.keyCode);
    // 我们可以利用keycode返回的ASCII码值来判断用户按下了哪个键
    if (e.keyCode === 65) {
        alert('您按下的a键');
    } else {
        alert('您没有按下a键');
    }
})
document.addEventListener('keypress', function(e) {
    // console.log(e);
    console.log('press:' + e.keyCode);
})

ASCII 表