javascript从入门到跑路-----小文的js学习笔记（15 — 3 ）--------键盘类事件

本文链接：https://blog.csdn.net/qq_45948983/article/details/106661014

**
javascript从入门到跑路-----小文的js学习笔记（1）---------script、alert、document。write() 和 console.log 标签
…
…
javascript从入门到跑路-----小文的js学习笔记目录
**

一、事件


onKeyDown	键盘按下事件（所有键）
onKeyUp	键盘释放事件
onKeyPress	键盘按下事件（只能是字符键）

1、那我们最先来说说我们的 onKeyDown 和 onKeyUp 一个在我们的按键被摁下触发事件，一个是当我们摁下时不会触发但当我们松开时除法。

那我们简单演示以下：
在这里插入图片描述
执行结果：当我们摁下键盘上的任意一个键都会弹出“哈哈哈哈”。（按下事件会立马发生）

而我们的onkeyup 与其恰恰相反：

执行结果：当我们按下任意键松开之后都会弹出我们的“哈哈哈哈”。（按下不会立马发生，松开之后才会发生事件）
在这里插入图片描述

2、onKeyPress 同样是键盘按下事件

但是和onkeydown有区别：
onkeydown 事件：我们按下键盘上的任意键都会触发；
onKeyPress事件：只有当我们按下字符键时才会触发，并不是所有键都会触发

补充：字符键指能够产生可见字符的键，包括我们的26个字母键、数字键、标点符号键和空格键。

二、属性

1、下面我们再来说一个东西 keycode 属性
在这里插入图片描述

我们键盘上的每一个按键都有唯一的一个键码与其对应，下面简单示例：

示例：当我们按下Q键弹出81.

在我们有时候只想按特定的键触发特定的事件时，就可以用到这个keycode属性来判定。

那我们简单示例:只有当我们按Q键的时候才会弹出“哈哈哈哈”，按其键不会
在这里插入图片描述

2、key 属性

返回的是一个字符串，然后字符串是按键本身的名字
示例：
在这里插入图片描述
执行结果：当我们按下tab键弹出的就是TAB的名称

**
ᴳᵉᵗᵗⁱⁿᵍ ʷʰᵃᵗ ʸᵒᵘ ʷᵃⁿᵗ ⁱˢ ᵗʰᵉ ᵇᵉˢᵗ ˢᵘʳᵖʳⁱˢᵉ ⁱⁿ ᵗʰᵉ ʷᵒʳˡᵈ.
-------------------得偿所愿是世界上最好的惊喜。