[油猴脚本开发指南]键盘事件的监听
# 键盘监听我们可以在实现网页的功能的时候，如果不想做界面，或者做一些需求的时候，可以使用键盘监听，这样不仅你可以更好的完成自己开发的需求，在一些特定的情况下，我们也可以事件代码的复用，来来回回批量生成jio本
# 键盘事件类型
通常键盘事件分为三种
keydown
keypress
keyup
我们先一个一个来了解
# keydown
keydown的触发时机是在键盘按键按下的时候
所有的按键都会触发keydown事件，无论按键是否产生字符值(ctrl等功能键不产生字符)
使用实例
```javascript
const input = document.querySelector('input');
const log = document.getElementById('log');
input.addEventListener('keydown', logKey);
function logKey(e) {
log.textContent += ` ${e.code}`;
}
```
## Tips
自Firefox 65起，keydown与keyup事件会在ime输入中文的时候被触发，如果需要忽略输入过程中的keydown事件，可以按照如下代码修改
中文输入在keydown阶段keycode为229
而isComposing代表正在输入状态
```javascript
eventTarget.addEventListener("keydown", event => {
if (event.isComposing || event.keyCode === 229) {
return;
}
// do something
});
```
# Keypress
mdn宣称此事件已被弃用，不在推荐使用此功能，尽管某些浏览器仍然支持，但可能随时停止工作
所以我们这里不在赘述
可以使用keydown代替
keypress通常是在产生字符值的时候触发事件
产生字符值的有字母，数字，标点等按键，不产生字符的如alt，shift，ctrl等，则不会触发该事件
注意，此事件已被废弃
# Keyup
keyup为按键松开的时候触发，keydown与key事件共同提供哪个键是被按下的代码
而Keypress则代表哪个字符被输入
例如小写字母a在keydown和keyup都为65，但是在keypress是指哪些字符被输入，并非小写a，而为大写A
## Tips
Keyup与keydown相同，在输入法的时输入的时候被触发，如果要忽略输入过程中，请参考上方代码
## 使用示例
```javascript
const input = document.querySelector('input');
const log = document.getElementById('log');
input.addEventListener('keyup', logKey);
function logKey(e) {
log.textContent += ` ${e.code}`;
}
```
# 结语
那么这节课我们就简单学习了键盘按键的相关内容
我们不仅可以使用addeventlistener做监听，也可以直接onxxx的形式对某个元素进行设置监听
但是更推荐addeventlistener哦
撒花~
获取按下键盘按键对应的键值方法👇
window.addEventListener('keydown' , (e) => {
console.log(e.keyCode);
})
//or
window.onkeydown = (e) => {
console.log(e.keyCode);
}
ggnb 学习了
页:
[1]