首页 > 代码库 > JS学习笔记9之event事件及其他事件
JS学习笔记9之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事件的兼容写法:
//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); }
三、默认事件
阻止默认事件（阻止使用右键事件）
document.oncontextmenu = function(ev) {
var Event=ev||window.event;
if (Event.preventDefault) {
//阻止默认动作(W3C)
Event.preventDefault();
} else{
//IE中阻止默认动作
Event.returnValue=http://www.mamicode.com/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=http://www.mamicode.com/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=http://www.mamicode.com/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=http://www.mamicode.com/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=http://www.mamicode.com/false;35 }36 alert(‘禁止鼠标按下!‘)37 }38 </script>
五、拖拽效果
主要知识点：
onmousedown onm ousemove onm ouseup
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>
JS学习笔记9之event事件及其他事件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。