鼠标和键盘事件

一、鼠标事件

1.定义

鼠标事件是指与鼠标操作相关的事件。很多对象都能够响应鼠标事件，在DOM中定义了了7个鼠标事件。

2.分类

页面中的所有元素都支持鼠标事件。所有的鼠标事件都会冒泡。鼠标事件也可以被取消，取消了鼠标事件不但会影响浏览器的默认行为，还会影响其它的事件。　　　　

2.分类

鼠标事件描述
click 用户单击鼠标左键或者按回车键时触发
dbclick 用户双击鼠标左键时触发
mousedown 用户双击鼠标左键时触发
mouseout 当鼠标指针离开对象所在区域时触发
mouseover 当鼠标指针进入对象所在区域时触发
mouseup 用户释放鼠标按钮时触发
mousemove 当鼠标指针在元素内部移动时重复触发

3.注意

页面中的所有元素都支持鼠标事件。所有的鼠标事件都会冒泡。鼠标事件也可以被取消，取消了鼠标事件不但会影响浏览器的默认行为，还会影响其它的事件。

4.实例

 
 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>检测到您有2.4G垃圾</p>
11     <button>清理缓存</button>
12 </body>
13 </html>
14 <script>
15 var btns=document.getElementsByTagName('button')
16 var p=document.getElementsByTagName('p')
17 btns[0]//因为getElementsByTagName获取到的是所有的button标签，所以用btns[0]来精准第一个
18 console.log(btns[0])
19 btns[0].onclick=function(){
20     alert("恭喜您清理成功")
21     p[0].innerHTML="检测到您有0G垃圾"//innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容；
22     
23 }//鼠标点击事件 鼠标点击后产生的事件，鼠标可以点击时移开取消
24 ​
25 btns[0].onmousedown=function(){
26     btns[0].innerHTML="正在清理"
27 }//鼠标按下事件 鼠标按下后会产生的事件  按下后立即反应，没有后悔机会
28 ​
29 btns[0].onmouseup=function(){
30     btns[0].innerHTML="清理成功"
31 }//鼠标抬起事件 鼠标抬起后会产生的事件
32 ​
33 btns[0].onmousemove=function(){
34     btns[0].innerHTML="点击清理"
35 }//鼠标移动事件 鼠标移动到目标上后会产生的事件
36 ​
37 btns[0].onmouseenter=function(){
38     console.log('鼠标进入')
39     btns[0].style.color='red'
40 }//鼠标进入事件
41 ​
42 btns[0].onmouseover=function(){
43     console.log('鼠标进入')
44 }//鼠标进入事件
45 btns[0].onmouseout=function(){
46     btns[0].innerHTML="清理缓存"
47   
48 }//鼠标移出事件 
49 btns[0].onmouseleave=function(){
50     console.log('鼠标移出')
51     btns[0].style.color='black'
52 }//鼠标移出事件 
53 ​
54 btns[0].ondblclick=function(){
55     console.log('鼠标双击')
56     btns[0].style.color='green'
57 }//鼠标双击事件 
58 btns[0].onmousewheel=function(){
59     console.log('鼠标滚轮')
60 }//鼠标双击事件 
61 ​
62 </script>
 

 

二、键盘事件

1.定义

顾名思义，就是用户击打键盘的时候触发的事件。

2.分类

键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件，它们都继承了KeyboardEvent接口。

  • keydown：按下键盘时触发。

  • keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。

  • keyup：松开键盘时触发该事件。

3.注意

每一个按键都有自己独特的keyCode

4.实例

复制代码
 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         // 三元运算符
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         // 三元运算符
57     }
58 ​
59 ​
60     }
61 </script>
62
 
posted @ 2021-12-26 14:35  Heroes13  阅读(162)  评论(0)    收藏  举报