第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.οnmοusedοwn=function ( ev ){
var Event = ev || window.event ; //兼容各个浏览器
alert( Event.clientX ) ;// 弹出鼠标相对窗口的X轴坐标
console.log(Event);
};
关于使用event事件的兼容写法:

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

三、默认事件

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

四、键盘事件（keyCode）

document.οnkeydοwn=function (ev){
　　var Event=ev||window.event;
　　alert(Event.keyCode);
}

组合键： ctrl + c
Event.ctrlKey&&Event.keyCode==67

 1 /*禁止右击阻止事件的兼容方式写法*/
 2     document.οncοntextmenu=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.οnkeydοwn=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>

转载于:https://www.cnblogs.com/le220/p/7668342.html

第53天：鼠标事件、event事件对象相关推荐

c# VLC 鼠标 click event 事件
c# 使用VLC 播放器时,事件被阻塞,无法直接使用鼠标事件,甚是不便. 解决方法: 既然Winform的视频控件事件被阻塞,那我们就在Winform的控件上面添加一个透明的可接受鼠标事件的控件即可. ...
互斥量(mutex)与事件(event)的使用
互斥量(Mutex) CreateMutex :创建一个互斥量 HANDLE CreateMutex( LPSECURITY_ATTRIBUTES lpMutexAtt ...
python多线程文件的数据续传_python38 1.线程一堆队列 2.事件Event 3.协程 4.断点续传...
复习 1.GIL锁 2.如何避免GIL锁给程序带来的效率影响 3.与自定义锁的区别 4. 线程池进程池 5 同步异步 6.异步回调 1.GIL锁全局解释器锁, 用来锁住解释器的互斥锁为啥 ...
idea中event log_【JavaScript 教程】事件——Event 对象
作者 | 阮一峰概述事件发生以后,会产生一个事件对象,作为参数传给监听函数.浏览器原生提供一个Event对象,所有的事件都是这个对象的实例,或者说继承了Event.prototype对象. Eve ...
JS-图片其他事件-Event对象-事件委托-DOM对象
JS-图片其他事件-Event对象-事件委托-DOM对象 1 回顾 1. 事件回调函数中 this 的指向2. 鼠标事件click dblclick contextmenumouseenter mou ...
JavaScript之DOM对象（Event事件）
文章目录一.Event事件汇总二.用法案例 1.serche搜索框 2.onload加载 3.事件绑定--标签内 4.事件绑定--JS接函数 5.onsubmit表单提交 6.事件传播 HTML ...
jQuery通过event获取点击事件的事件对象
要想搞明白js的事件机制,必须搞清楚几个概念:事件对象,事件源,还有事件流事件对象: 当事件发生时会产生事件对象,事件对象的作用是用来记录"事件发生是一些相关的信息.注意事件对象只有在事件 ...
【js】event(事件对象)详解
1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...
2020.11.18第十三章事件（事件处理程序；事件对象；事件类型：UI事件；焦点事件；鼠标与键盘事件变动事件模拟事件）
事件处理程序 html事件处理程序(直接在html中书写script) <!-- //#### 事件处理程序 //html时间程序可以直接在HTML文件中写,而且还可以引用其他地方的方法和函数 ...

第53天：鼠标事件、event事件对象

第53天：鼠标事件、event事件对象相关推荐

最新文章

热门文章