JS学习笔记9之event事件及其他事件

来源：互联网发布：门捷列夫没得奖知乎编辑：程序博客网时间：2024/05/18 00:52

-->鼠标事件
-->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事件的兼容写法:

//IE9以上 谷歌 火狐支持  /  IE6、7、8不支持    document.onclick=function (ev){        var e=ev;        console.log('鼠标指针对于浏览器页面的水平坐标'+e.clientX);    }//IE 谷歌支持/  火狐不支持    document.onclick=function (){        var e=window.event||ev;        console.log('鼠标指针对于浏览器页面的垂直坐标'+e.clientY);    }/*兼容各个浏览器，event事件写法*/    document.onclick=function (ev){        var eve=window.event||ev;//event事件兼容写法写法        console.log(eve.clientY);        console.log(eve.preventDefault);    }

三、默认事件

阻止默认事件（阻止使用右键事件）

四、键盘事件（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     }

<禁止复制>的练习：

 1 <body> 2     <p id="con">我要的只是简单地，只是诚实的，好好享受平凡，会好的，一定会好的！我要的只是你爱我，可不是你恨我，哪来的那么多麻烦!</p> 3 </body> 4 <script> 5     var con=document.getElementById('con'); 6 /*阻止元素右击事件*/ 7     con.oncontextmenu=function(ev){ 8         var Event=ev||window.event; 9         if (Event.preventDefault) {//阻止默认动作(W3C)10         Event.preventDefault();11         } else{//IE中阻止默认动作12         Event.returnValue=false;13         };14          alert('禁止使用右键！');15     }16 /*阻止ctrl+c操作*/17     document.onkeydown=function(ev){18         var e=ev||window.event;19         if (e.ctrlKey&&e.keyCode==67) {20             if(e.preventDefault()){21                 e.preventDefault();22             }else {23                 e.returnValue=false;24             }25             alert('不能这样操作!');26         }27     }28 /*阻止鼠标按下操作*/29     document.onmousedown=function(ev){30         var e=ev||window.event;31         if (e.preventDefault()) {32             e.preventDefault();33         } else {34             e.returnValue=false;35         }36         alert('禁止鼠标按下!')37     }38 </script>

五、拖拽效果

主要知识点：

onmousedown onmousemove onmouseup

event.clientX event.clientY

offset client 系列属性

鼠标拖拽_T:

 1 <head> 2 <meta charset="UTF-8"> 3 <title>鼠标拖拽_T</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:300;17     top:100;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 xStart,yStart;28     var xEnd,yEnd;29     dot.onmousedown=function(ev){30         var e=window.event||ev;31         x=e.offsetX;32         y=e.offsetY;33         dot.onmousemove=function(ev){34             var e=window.event||ev;35             var xEnd=e.clientX-x;36             var yEnd=e.clientY-y;37             dot.style.left=xEnd+'px';38             dot.style.top=yEnd+'px';39         }40     }41     dot.onmouseup=function(){42         dot.onmousemove=null;43     }44 </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>

0 0