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

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


javascript从入门到跑路-----小文的js学习笔记目录
**

一、事件

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

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

那我们简单演示以下:
javascript从入门到跑路-----小文的js学习笔记(15 — 3 )--------键盘类事件_第1张图片
执行结果:当我们摁下键盘上的任意一个键都会弹出“哈哈哈哈”。(按下事件会立马发生)
javascript从入门到跑路-----小文的js学习笔记(15 — 3 )--------键盘类事件_第2张图片
而我们的onkeyup 与其恰恰相反:
javascript从入门到跑路-----小文的js学习笔记(15 — 3 )--------键盘类事件_第3张图片
执行结果:当我们按下任意键松开之后都会弹出我们的“哈哈哈哈”。(按下不会立马发生,松开之后才会发生事件)
javascript从入门到跑路-----小文的js学习笔记(15 — 3 )--------键盘类事件_第4张图片

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

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

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

二、属性

1、下面我们再来说一个东西 keycode 属性
javascript从入门到跑路-----小文的js学习笔记(15 — 3 )--------键盘类事件_第5张图片
javascript从入门到跑路-----小文的js学习笔记(15 — 3 )--------键盘类事件_第6张图片
javascript从入门到跑路-----小文的js学习笔记(15 — 3 )--------键盘类事件_第7张图片
javascript从入门到跑路-----小文的js学习笔记(15 — 3 )--------键盘类事件_第8张图片
我们键盘上的每一个按键都有唯一的一个键码与其对应,下面简单示例:
javascript从入门到跑路-----小文的js学习笔记(15 — 3 )--------键盘类事件_第9张图片
示例:当我们按下Q键弹出81.
javascript从入门到跑路-----小文的js学习笔记(15 — 3 )--------键盘类事件_第10张图片
在我们有时候只想按特定的键 触发特定的事件时,就可以用到这个keycode属性来判定。

那我们简单示例:只有当我们按Q键的时候才会弹出“哈哈哈哈”,按其键不会
javascript从入门到跑路-----小文的js学习笔记(15 — 3 )--------键盘类事件_第11张图片
javascript从入门到跑路-----小文的js学习笔记(15 — 3 )--------键盘类事件_第12张图片
2、key 属性

返回的是一个字符串,然后字符串是按键本身的名字
示例:
javascript从入门到跑路-----小文的js学习笔记(15 — 3 )--------键盘类事件_第13张图片
执行结果:当我们按下tab键弹出的就是TAB的名称
javascript从入门到跑路-----小文的js学习笔记(15 — 3 )--------键盘类事件_第14张图片
**
                    ᴳᵉᵗᵗⁱⁿᵍ ʷʰᵃᵗ ʸᵒᵘ ʷᵃⁿᵗ ⁱˢ ᵗʰᵉ ᵇᵉˢᵗ ˢᵘʳᵖʳⁱˢᵉ ⁱⁿ ᵗʰᵉ ʷᵒʳˡᵈ.
                                      -------------------得偿所愿是世界上最好的惊喜。 ​​​

你可能感兴趣的:(javascript从入门到跑路-----小文的js学习笔记(15 — 3 )--------键盘类事件)