一、鼠标事件
1、单击事件
复制代码
1box.onclick
2、双击事件(双击时也会触发单击)
复制代码
1box.ondblonclick
3、鼠标右键
复制代码
1
2
3
4
5box.oncontextmenu=function(){ console.log('右键事件'); //取消鼠标的默认事件 return false; }
4、按下|移动|抬起|鼠标悬浮|鼠标移开|鼠标右键
复制代码
1
2
3
4
5
6
7
8onmousedown 鼠标按下 onmousemove 鼠标移动 onmouseup 鼠标抬起 onmouseover 鼠标悬浮 onmouserout 鼠标移开(从父集移至子集，触发out事件，紧接着触发子集的over事件，并可以冒泡给父集(触发父集的over)) oncontextmenu 鼠标右键 onmouseenter 鼠标悬浮() onmouseleave 鼠标移开(leave默认子集是父集的一部分，所以从子集移到父集不会触发,enter事件也不会触发)
复制代码
1
2enter:父集enter 子集enter (不支持冒泡) over:子集over 父集over(想当于子集冒泡给父集) (支持冒泡)
总结： 将父集和自己分开考虑盒子的悬浮离开事件，用over | out组合；
将子集纳入父集的考虑当中，只考虑父集的相应悬浮离开事件，采用 enter | leave组合；
单独考虑一个盒子的悬浮离开事件，都可以使用
二、js的盒模型
1、应用
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<style> .box{ width:100px; height:100px; background:red; } </style> <div class="box"></div> <script> var box=document.querySelector('.box') var width=getComputedStyle(box,null).width; console.log(width) //转化成数字类型 console.log(+(width.slice(0,3))) </script> ==>100px
2、数字字符转换
复制代码
1
2
3
4
5
6
7var a="1213124" //转化成整型 a=+a//如果待单位会转化成NaN a=parseInt(a) //字符的切割 a.substr(0,3)==>123 //从0往后取3个单位 a.slice(0,2)==>12 //从0取到2，前取后不取
3、获取padding
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32<style> .box{ width:100px; height:100px; background:red; padding:20px; position:absolute; } body{ position:relative; } </style> <div class="box"></div> <script> var box=document.querySelector('.box') var width=getComputedStyle(box,null).width; console.log(width) //转化成数字类型 console.log(+(width.slice(0,3))) var clientW=box.clientWidth //获得padding和width的总和 console.log(box.clientWidth) //获得盒子的总高度(padding+height) console.log(box.clientHeight) //padding+border+width console.log(box.offsetWidth) //padding+height+border console.log(box.offsetHeight) //匹配绝对定位的方向实现(获取与定位父集的距离)left top console.log(box.offsetTop) console.log(box.offsetLeft) </script>
三、鼠标事件的拖拽案例
1.v1版本
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27<style> .box{ width:100px; height:100px; background:red; border: 10px solid black; position:absolute; } </style> <div class='box'></div> <script> var box=document.querySelector('.box'); box.onmousedown=function(){ console.log('按下'); box.onmousemove=function(ev){ console.log('移动'); var x=ev.clientX; var y=ev.clientY; box.style.left=x-10+'px'; box.style.top=y-10+'px'; } }; box.onmouseup=function(){ console.log('取消移动'); box.onmousemove=null; } </script>
2、鼠标拖拽事件v2版本
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33<style> .box{ width: 100px; height: 100px; border: 10px solid red; background: black; position:absolute; top: 0; left: 0; } </style> <div class="box"></div> <script> var box=document.querySelector('.box'); box.onmousedown=function (fa) { console.log('按下'); var dX=fa.clientX-box.offsetLeft; var dY=fa.clientY-box.offsetTop; //将移动鼠标捕捉改成文档，是为了鼠标就算脱离box也不会停止移动 document.onmousemove=function (ev) { console.log('移动'); var x=ev.clientX; var y=ev.clientY; box.style.left=x-dX+'px'; box.style.top=y-dY+'px'; } }; box.onmouseup=function () { console.log('移开'); //对鼠标移动事件删除 document.onmousemove=null; } </script>
四、键盘事件
1、键盘按下事件(键盘按下会一直触发事件)
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<style> .box{ width:100px; height:100px; background:red; } </style> <div class="box"></div> <script> var box=document.querySelector('.box'); document.onkeydown=function(ev){ // console.log(ev.keyCode); console.log(ev.which) } </script>
2、键盘按下移动盒模型案例
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<style> .box{ width:100px; height:100px; background:red; position:absolute; top:0; left:0; } </style> <div class="box"></div> <script> var box=document.querySelector('.box'); document.onkeydown=function(ev){ console.log(ev.keyCode); switch (ev.keyCode){ case 37:box.style.left=box.offsetLeft-10+'px';break; case 38:box.style.top=box.offsetTop-10+'px';break; case 39:box.style.left=box.offsetLeft+10+'px';break; case 40:box.style.top=box.offsetTop+10+'px';break; } } </script>
四、javascript其他事件
1、onload(文档加载事件)
复制代码
1
2
3
4
5
6
7
8
9<script> //将script标签写在标签前面使用 window.onload=function(){ var box=document.querySelector('.box') console.log(box) } </script> <div class='box'></div>
2、onscroll事件
复制代码
1
2
3
4
5
6
7
8
9
10
11
12<script> //将script标签写在标签前面使用 window.onload=function(){ var box=document.querySelector('.box') console.log(box) } window.onscroll=function(){ console.log(window.scrollY); } </script> <div class='box'></div> <br>*100
3、盒子显影与鼠标滚动事件的案例
1)滚动一直触发事件
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42<style> .box{ width:100px; height:100px; background:red; position:absolute; top: 0; left: 0; } .btn{ width: 50px; height: 50px; background: red; display:none; position: fixed; top: 200px; right: 100px; } </style> <div class="box"></div> <script> //将script标签写在标签前面使用 window.onload=function(){ var box=document.querySelector('.box'); console.log(box); } window.onscroll=function(){ var btn=document.querySelector('.btn'); console.log(window.scrollY); console.log("cc"); if (window.scrollY>700){ console.log("bb"); btn.style.display='block'; btn.style.background="black" } if (window.scrollY<=700){ btn.style.display='none'; } } </script> <div class='box'></div> <div class="btn"></div>
2）只触发一次
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46<style> .box{ width:100px; height:100px; background:red; position:absolute; top: 0; left: 0; } .btn{ width: 50px; height: 50px; background: red; display:none; position: fixed; top: 200px; right: 100px; } </style> <div class="box"></div> <script> //将script标签写在标签前面使用 window.onload=function(){ var box=document.querySelector('.box'); console.log(box); } var isshow=false; window.onscroll=function(){ var btn=document.querySelector('.btn'); console.log(window.scrollY); // console.log("cc"); if (window.scrollY>700){ if (!isshow){ console.log("bb"); btn.style.display='none'; btn.style.background="black"; isshow=true; } }else { if (isshow){ btn.style.display="block"; isshow=false } } }
转载于:https://www.cnblogs.com/chuwanliu/p/11048048.html
最后
以上就是负责薯片最近收集整理的关于javascript鼠标及键盘事件总结及案例的全部内容，更多相关javascript鼠标及键盘事件总结及案例内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复