第六章 键盘事件
键盘事件
| 键盘时间内 | 触发条件 |
|---|---|
| onkeyup | 某个键盘按键松开时（弹起时）触发 |
| onkeydown | 某个键盘按键按下时就触发 |
| onkeypress | 某个键盘被按下时触发（但是他不识别功能键 比如Ctrl shift 上下键等） |
注意：
- 如果使用addEventListenr不需要加on
- onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift等。
- 三个事件的执行顺序是: keydown-- keypress -- keyup
<script>
// 常用的键盘事件
//1. keyup 按键弹起的时候触发
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
</script>
键盘事件对象
| 键盘事件对象 属性 | 说明 |
|---|---|
| keyCode | 返回该键的ASCll值 |
注意：
- onkeydown和onkeyup 不区分大小写，onkeypress 区分字母大小写。
- 在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有键（包括功能键）
- keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCll值
<script>
//键盘事件对象中的keyCode属性可以获取相应的ASCII码值
document.addEventListener('keyup', function (e) {
console.log(e.keyCode);
//keydpwn keyup 这两个不区分大小写 a 和 A 得到的都是65
//keypress 区分大小写
})
document.addEventListener('kepress', function (e) {
console.log(e.keyCode);
//keydpwn keyup 这两个不区分大小写 a 和 A 得到的都是65
//keypress 区分大小写
})
</script>