一、鼠标事件

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

脚本宝典总结

以上是脚本宝典为你收集整理的鼠标和键盘事件全部内容，希望文章能够帮你解决鼠标和键盘事件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

上一篇: 自控理论第04章根轨迹方法下一篇:利用关联规则实现推荐算法

猜你在找的心得技巧相关文章

clion结合vcpkg以及GTest的使用 2022-07-07
EGF 2022-06-06
ExtJS 布局-Column布局（Column layout） 2022-06-05
颜色之ARGB与RGB、RGBA的区别与介绍 2022-04-15
rgba中的a是什么意思 CSS之RGBA颜色指南 2022-04-15
rootfs -根文件系统制作 2022-07-07
网页简单布局之结构与表现原则分享 2022-04-15
小项目中怎么防止Vue的闪现画面效果 2022-04-15
隐藏 Web 中的元素方法及优缺点教程详解 2022-04-15
告别硬编码让你的前端表格自动计算的实例代码 2022-04-15

全站导航更多