第53天：鼠标事件event事件对象
Posted 半指温柔乐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第53天：鼠标事件event事件对象相关的知识，希望对你有一定的参考价值。
-->鼠标事件
-->event事件对象
-->默认事件
-->键盘事件（keyCode）
-->拖拽效果
一、鼠标事件
onclick ---------------鼠标点击事件
oncontextmenu------鼠标右键点击
onmouseover --------鼠标移上
onmouseout ---------鼠标移出
onmousedown -------鼠标按下
onmousemove -------鼠标移动
onmouseup ----------鼠标抬起
1 <head> 2 <meta charset="UTF-8"> 3 <title>鼠标事件</title> 4 <style> 5 *{margin:0;padding:0;list-style: none;} 6 #con{ 7 width:300px; 8 height:300px; 9 background: #ccc; 10 border:1px solid #666; 11 margin:10px auto; 12 } 13 #con #box{ 14 width:200px; 15 height:200px; 16 margin:50px auto; 17 background: pink; 18 } 19 </style> 20 </head> 21 <body> 22 <div id="con"> 23 <div id="box"></div> 24 </div> 25 </body> 26 <script> 27 var con=document.getElementById(‘con‘); 28 var x=0,y=0,z=0,a=0,b=0,c=0; 29 //onclick ---------鼠标点击事件 30 document.onclick=function(){ 31 x++; 32 console.log(‘鼠标点击_onclick‘+x); 33 } 34 //oncontextmenu----鼠标右键点击 35 document.oncontextmenu=function(){ 36 alert(‘鼠标右击事件‘);//先弹出弹框后显示菜单 37 } 38 //onmouseover -----鼠标移上(包括子元素) 39 con.onmouseover=function(){ 40 y++; 41 console.log(‘鼠标移上_onmouseover‘+y); 42 } 43 //onmouseout ------鼠标移出（包括子元素） 44 con.onmouseout=function(){ 45 z++; 46 console.log(‘鼠标移出_onmouseout‘+z); 47 } 48 //onmouseenter -----鼠标移上 49 con.onmouseenter=function(){ 50 y++; 51 console.log(‘鼠标移上_onmouseenter‘+y); 52 } 53 //onmouseleave------鼠标移出 54 con.onmouseleave=function(){ 55 z++; 56 console.log(‘鼠标移出_onmouseleave‘+z); 57 } 58 //onmousedown -----鼠标按下 59 document.onmousedown=function(){ 60 a++; 61 console.log(‘鼠标按下_onmousedown‘+a); 62 } 63 //onmouseup ------鼠标抬起 64 document.onmouseup=function(){ 65 b++; 66 console.log(‘鼠标按下_onmouseup‘+b); 67 } 68 //onmousemove -----鼠标移动 69 con.onmousemove=function(){ 70 c++; 71 console.log(c); 72 } 73 </script>
二、event事件对象
event对象只在事件发生的过程中才有效
用途：需要获取和事件相关的信息时使用
如：
获取键盘按下或弹起的按键
获取鼠标的位置坐标
获取事件名称
获取事件生成的日期时间
等等......
event对象中包含了所有与事件相关的信息
所有浏览器都支持event对象，只是支持的方式不一样
- FireFox、Chrome等浏览器要获取到event对象，需要从函数中传入，参数名随意
- 而IE在浏览器中event作为window对象的一个属性存在，可以直接使用 event 或 window.event
例如：
document.onmousedown=function ( ev ){
var Event = ev || window.event ; //兼容各个浏览器
alert( Event.clientX ) ;// 弹出鼠标相对窗口的X轴坐标
console.log(Event);
};
关于使用event事件的兼容写法:
1 //IE9以上 谷歌 火狐支持 / IE6、7、8不支持 2 document.onclick=function (ev){ 3 var e=ev; 4 console.log(‘鼠标指针对于浏览器页面的水平坐标‘+e.clientX); } 5 //IE 谷歌支持/ 火狐不支持 6 document.onclick=function (){ 7 var e=window.event||ev; 8 console.log(‘鼠标指针对于浏览器页面的垂直坐标‘+e.clientY); 9 } 10 /*兼容各个浏览器，event事件写法*/ 11 document.onclick=function (ev){ 12 var eve=window.event||ev;//event事件兼容写法写法 13 console.log(eve.clientY); 14 console.log(eve.preventDefault); 15 }
三、默认事件
阻止默认事件（阻止使用右键事件）
document.oncontextmenu = function(ev) {
var Event=ev||window.event;
if (Event.preventDefault) {
//阻止默认动作(W3C)
Event.preventDefault();
} else{
//IE中阻止默认动作
Event.returnValue=false;
};
alert(‘禁止使用右键！‘);
}
四、键盘事件（keyCode）
document.onkeydown=function (ev){
var Event=ev||window.event;
alert(Event.keyCode);
}
组合键： ctrl + c
Event.ctrlKey&&Event.keyCode==67
1 /*禁止右击阻止事件的兼容方式写法*/ 2 document.oncontextmenu=function (ev){ 3 var ev=window.event||ev; 4 if (ev.preventDefault) { 5 ev.preventDefault();//w3c阻止默认事件 6 }else{ 7 ev.returnValue=false;//IE阻止默认事件 8 }; 9 } 10 /*对获取键盘键码的兼容写法*/ 11 document.onkeydown=function (ev){ 12 var e=window.event||ev; 13 console.log(e.keyCode);//打印键码 14 }
<禁止复制>的练习：
<body> <p id="con">我要的只是简单地，只是诚实的，好好享受平凡，会好的，一定会好的！我要的只是你爱我，可不是你恨我，哪来的那么多麻烦!</p> </body> <script> var con=document.getElementById(‘con‘); /*阻止元素右击事件*/ con.oncontextmenu=function(ev){ var Event=ev||window.event; if (Event.preventDefault) {//阻止默认动作(W3C) Event.preventDefault(); } else{//IE中阻止默认动作 Event.returnValue=false; }; alert(‘禁止使用右键！‘); } /*阻止ctrl+c操作*/ document.onkeydown=function(ev){ var e=ev||window.event; if (e.ctrlKey&&e.keyCode==67) { if(e.preventDefault()){ e.preventDefault(); }else { e.returnValue=false; } alert(‘不能这样操作!‘); } } /*阻止鼠标按下操作*/ document.onmousedown=function(ev){ var e=ev||window.event; if (e.preventDefault()) { e.preventDefault(); } else { e.returnValue=false; } alert(‘禁止鼠标按下!‘) } </script>
五、拖拽效果
主要知识点：
onmousedown onmousemove onmouseup
event.clientX event.clientY
offset client 系列属性
鼠标拖拽_T:
<head> <meta charset="UTF-8"> <title>鼠标拖拽_T</title> <style> *{margin:0;padding:0;list-style: none;} #dot{ width:80px; height:80px; line-height: 30px; text-align: center; font-size:24px; background: #D00000; color:#fff; cursor:move; position:absolute; left:300; top:100; } </style> </head> <body> <div id="dot"></div> </body> <script> var dot=document.getElementById(‘dot‘); var x,y; var xStart,yStart; var xEnd,yEnd; dot.onmousedown=function(ev){ var e=window.event||ev; x=e.offsetX; y=e.offsetY; dot.onmousemove=function(ev){ var e=window.event||ev; var xEnd=e.clientX-x; var yEnd=e.clientY-y; dot.style.left=xEnd+‘px‘; dot.style.top=yEnd+‘px‘; } } dot.onmouseup=function(){ dot.onmousemove=null; } </script>
鼠标拖拽_M
1 <head> 2 <meta charset="UTF-8"> 3 <title>鼠标事件</title> 4 <style> 5 *{margin:0;padding:0;list-style: none;} 6 #dot{ 7 width:80px; 8 height:80px; 9 line-height: 30px; 10 text-align: center; 11 font-size:24px; 12 background: #D00000; 13 color:#fff; 14 cursor:move; 15 position:absolute; 16 /* left:0; 17 top:0; */ 18 } 19 </style> 20 </head> 21 <body> 22 <div id="dot"></div> 23 </body> 24 <script> 25 var dot=document.getElementById(‘dot‘); 26 var x,y; 27 var l1,t1; 28 var lm,tm; 29 var le,te; 30 var a=true; 31 dot.onmousedown=function(ev){ 32 a=true; 33 var e=window.event||ev; 34 x=e.offsetX; 35 y=e.offsetY; 36 l1=e.clientX-x; 37 t1=e.clientY-y; 38 dot.style.left=l1+‘px‘; 39 dot.style.top=t1+‘px‘; 40 console.log(x,y); 41 } 42 dot.onmousemove=function(ev){ 43 if(a){ 44 var e=window.event||ev; 45 var lm=e.clientX-x; 46 var tm=e.clientY-y; 47 dot.style.left=lm+‘px‘; 48 dot.style.top=tm+‘px‘; 49 } 50 } 51 dot.onmouseup=function(ev){ 52 a=false; 53 } 54 </script>
以上是关于第53天：鼠标事件event事件对象的主要内容，如果未能解决你的问题，请参考以下文章