1, Mouse event
1. Definitions
Mouse events refer to events related to mouse operations. Many objects can respond to mouse events. Seven mouse events are defined in the DOM.
2. Classification
All elements in the page support mouse events. All mouse events bubble. Mouse events can also be cancelled. Canceling mouse events will not only affect the default behavior of the browser, but also affect other events.
2. Classification
| Mouse event | describe |
|---|---|
| click | Triggered when the user clicks the left mouse button or presses enter |
| dbclick | Triggered when the user double clicks the left mouse button |
| mousedown | Triggered when the user double clicks the left mouse button |
| mouseout | Triggered when the mouse pointer leaves the area of the object |
| mouseover | Triggered when the mouse pointer enters the area where the object is located |
| mouseup | Triggered when the user releases the mouse button |
| mousemove | Triggered repeatedly when the mouse pointer moves inside the element |
3. Attention
All elements in the page support mouse events. All mouse events bubble. Mouse events can also be cancelled. Canceling mouse events will not only affect the default behavior of the browser, but also affect other events.
4. Examples
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 </head>
9 <body>
10 <p>You have 2 detected.4G garbage</p>
11 <button>Clean cache</button>
12 </body>
13 </html>
14 <script>
15 var btns=document.getElementsByTagName('button')
16 var p=document.getElementsByTagName('p')
17 btns[0]//Because getElementsByTagName gets all the button tags, btns[0] is used to specify the first one
18 console.log(btns[0])
19 btns[0].onclick=function(){
20 alert("Congratulations on cleaning up")
21 p[0].innerHTML="You have 0 detected G garbage"//innerHTML is a two-way function in JS: get the content of the object or insert content into the object;
22
23 }//Mouse click event is an event generated after mouse click. It can be removed and cancelled when the mouse is clicked
24
25 btns[0].onmousedown=function(){
26 btns[0].innerHTML="Cleaning up"
27 }//Mouse down event: the event generated after mouse down will react immediately after pressing, and there is no chance to regret
28
29 btns[0].onmouseup=function(){
30 btns[0].innerHTML="Cleanup succeeded"
31 }//Mouse up event the event that will be generated when the mouse is raised
32
33 btns[0].onmousemove=function(){
34 btns[0].innerHTML="Click clean"
35 }//Mouse movement event the event that will be generated when the mouse moves over the target
36
37 btns[0].onmouseenter=function(){
38 console.log('Mouse entry')
39 btns[0].style.color='red'
40 }//Mouse entry event
41
42 btns[0].onmouseover=function(){
43 console.log('Mouse entry')
44 }//Mouse entry event
45 btns[0].onmouseout=function(){
46 btns[0].innerHTML="Clean cache"
47
48 }//Mouse out event
49 btns[0].onmouseleave=function(){
50 console.log('Mouse out')
51 btns[0].style.color='black'
52 }//Mouse out event
53
54 btns[0].ondblclick=function(){
55 console.log('Double click the mouse')
56 btns[0].style.color='green'
57 }//Mouse double click event
58 btns[0].onmousewheel=function(){
59 console.log('Mouse wheel')
60 }//Mouse double click event
61
62 </script>
2, Keyboard events
1. Definitions
As the name suggests, it is an event triggered when the user hits the keyboard.
2. Classification
Keyboard events are triggered by the user hitting the keyboard, mainly including keydown, keypress and keyup. They all inherit the KeyboardEvent interface.
-
keydown: triggered when the keyboard is pressed.
-
keypress: triggered when a key with value is pressed, that is, when a key without value such as Ctrl, Alt, Shift and Meta is pressed, this event will not be triggered. For a key with value, the keydown event is triggered first, and then this event is triggered.
-
keyup: this event is triggered when the keyboard is released.
3. Attention
Each key has its own unique keyCode
4. Examples
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 #box {
8 width: 400px;
9 height: 600px;
10 border: 1px solid;
11 margin: 50px auto 0;
12 position: relative
13 }
14
15 #tank {
16 width: 50px;
17 height: 50px;
18 position: absolute;
19 left: 175px;
20 bottom: 0;
21 background: darkgreen
22 }
23 </style>
24 </head>
25 <body>
26 <div id="box">
27 <div id="tank"></div>
28 </div>
29 </body>
30 </html>
31 <script>
32 var tank=document.getElementById('tank'),
33 box=document.getElementById('box')
34 document.onkeydown=function(event){
35
36
37 if(event.keyCode==37){
38
39 // tank.style.left=tank.offsetLeft-3+'px'
40 // if(tank.offsetLeft<=0) tank.style.left=0
41
42
43 tank.style.left=tank.offsetLeft>0?tank.offsetLeft-3+'px':0
44 // Ternary operator
45 }
46
47 if(event.keyCode==39){
48
49
50 // tank.style.left=tank.offsetLeft+3+'px'
51 // if(tank.offsetLeft>=box.offsetWidth-tank.offsetWidth)
52 // tank.style.left=box.offsetWidth-tank.offsetWidth+'px'
53
54
55 tank.style.left=tank.offsetLeft<box.offsetWidth-tank.offsetWidth?tank.offsetLeft+3+'px':box.offsetWidth-tank.offsetWidth+'px'
56 // Ternary operator
57 }
58
59
60 }
61 </script>
62