你的位置:首页 > Java教程

[Java教程]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=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   }

 <禁止复制>的练习:

 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>