1. Keyboard key event
keydown button pressed
keyup key up
keypreww key press
1. By default, keyboard events are only supported by tags that can get focus, generally only input tags and textarea, and document document.documentElement document.body
2. The keyboard press event, if you keep pressing the keyboard button, the event will always be triggered
3. The difference between keydown and keypress
All keys will trigger the keydown event
Some special keys will not trigger the keypress event (esc ctrl alt shift, etc.)
2. The event object of the keyboard event
Different event types, the data information stored in the event object is different
There is no so-called mouse click coordinates in keyboard events
e.keyCode (keyboard key number)
Each keyboard key has an independent key number, which is used to distinguish which key is triggered
Used by lower versions of Firefox, e.which stores the key number
Now all browsers are used, e.keyCode and e.which store key numbers at the same time
e.altkey e.ctrlkey e.shiftkey
It is to judge whether the button is pressed, if the button is pressed, the return value is true, if not, the return value is false
Note: In the actual project, by judging the pressed button, trigger the execution of different program codes
3. Case: Control the movement of the label through the keyboard, up, down, left, and right
Ideas:
Control the positioning position of the label by keyboard keys within the scope of the parent label
1. Bind keyboard events to the entire document
When the event is triggered, the control is set to the p tag
Determine the key number of the up, down, left, and right keys
Left 37 Up 38 Right 39 Down 40
2. Execute different program codes according to different trigger tags
Left: Get the original left data, accumulate the value each time, set the minimum value of the extreme value to 0, and assign the new value to the left attribute
Above: Get the original top data, accumulate the value each time, set the minimum value of the extreme value to 0, and assign the new value to the top attribute
Right: Get the original left data, accumulate the value each time, and set the maximum value of the extreme value to be parent-level occupancy-child-level occupancy
The new value is assigned to the left property
Bottom: Obtain the original top data, accumulate the value each time, and set the maximum value of the extreme value to be parent-level occupancy-child-level occupancy
The new value is assigned to the top property
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 600px;
height: 600px;
padding: 100px;
border: 20px solid paleturquoise;
background: rgb(160, 241, 160);
display: flex;
justify-content: center;
align-items: center;
margin: 200px auto;
position: relative;
}
p {
width: 50px;
height: 50px;
padding: 50px;
border: 10px solid orange;
background: pink;
position: absolute;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<script>
//获取标签对象
var oDiv = document.querySelector('div');
var oP = document.querySelector('p');
//获取父级占位（内容+padding）
let oDivWidth = oDiv.clientWidth;
let oDivHeight = oDiv.clientHeight;
//获取子级占位（内容+padding+border）
let oPWidth = oP.offsetWidth;
let oPHeight = oP.offsetHeight;
//给整个document绑定事件
document.addEventListener('keydown', function (e) {
//键盘按键编号是 37 证明点击的是 向左按键
if (e.keyCode === 37) {
//按下的是左按键 需要 p标签向左定位移动
//获取当前标签 left 定位数值
let oPLeft = parseInt(window.getComputedStyle(oP).left);
//累减 设定的步长值
oPLeft -= 5;
//设置最小值
oPLeft = oPLeft < 0 ? 0 : oPLeft;
//将 新的数值 作为定位属性的属性值
oP.style.left = oPLeft + 'px';
} else if (e.keyCode === 38) {
let oPTop = parseInt(window.getComputedStyle(oP).top);
oPTop -= 5;
oPTop = oPTop < 0 ? 0 : oPTop
oP.style.top = oPTop + 'px';
} else if (e.keyCode === 39) {
let oPLeft = parseInt(window.getComputedStyle(oP).left);
oPLeft += 5;
oPLeft = oPLeft > oDivWidth - oPWidth ? oDivWidth - oPWidth : oPLeft;
oP.style.left = oPLeft + 'px';
} else if (e.keyCode === 40) {
let oPTop = parseInt(window.getComputedStyle(oP).top);
oPTop += 5;
oPTop = oPTop > oDivHeight - oPHeight ? oDivHeight - oPHeight : oPTop;
oP.style.top = oPTop + 'px';
}
})
</script>
</body>
</html>