第43天:事件对象event

Posted 半指温柔乐

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第43天:事件对象event相关的知识,希望对你有一定的参考价值。

一、事件对象
事件:onmouseover、 onmouseout、 onclick
event //事件的对象

兼容写法:var event = event || window.event;

event常见属性,如下表:

属性

作用

data

返回拖拽对象的URL字符串(dragDrop

width

该窗口或框架的高度

height

该窗口或框架的高度

pageX

光标相对于该网页的水平位置(ie无)

pageY

光标相对于该网页的垂直位置(ie无)

screenX

光标相对于该屏幕的水平位置

screenY

光标相对于该屏幕的垂直位置

target

该事件被传送到的对象

type

事件的类型

clientX

光标相对于该网页的水平位置 (当前可见区域)

clientY

光标相对于该网页的水平位置

二、pageX、 clientX、 screenX的区别

1、screenX 、screenY电脑屏幕为基准

2、pageX 、pageY文档(绝对定位)为基准 IE6、7、8不认识
3、clientX、   clientY可视区域为基准

 

三、其他事件

div.onmouseover  div.onmousemove   区别  

      相同点都是 经过  div 才会触发

      div.onmouseover    只触发一次

      div.onmousemove   每移动一像素,就会触发一次

      onmouseup       当鼠标弹起   

      onmousedown     当鼠标按下的时候  

   1、拖动 原理 ==   鼠标按下  接着 移动鼠标 。

   bar.onmousedown = function(){

            document.onmousemove = function(){

            }

}

当我们按下鼠标的时候,就要记录当前 鼠标 的位置 - 大盒子的位置 

1、 算出  bar  当前 在  大盒子内的距离 。

 三、防止选择拖动

我们知道 按下鼠标然后拖拽可以选择文字 的。

清除选中的内容

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

 

案例:

1、鼠标点击跟随动画

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>鼠标点击跟随效果</title>
 6     <style>
 7         #image{
 8             width: 88px;
 9             position: absolute;
10             left: 0;
11             top:0;
12         }
13     </style>
14 </head>
15 <body>
16 <img src="img.jpg" alt="" id="image">
17 </body>
18 </html>
19 <script>
20     /*document.onclick=function(event){
21         var event=event||window.event;
22         console.log(event.pageX);
23         console.log(event.clientX);
24         console.log(event.screenX);
25 
26     }*/
27 
28     var image=document.getElementById("image");
29     document.onclick=function(event){
30         var event=event||window.event;
31         targetX=event.clientX-image.offsetWidth/2;
32         targetY=event.clientY-image.offsetHeight/2;
33     }
34     //缓动动画
35     var leaderX=0;
36     var leaderY=0;
37     var targetX=0;
38     var targetY=0;
39     setInterval(function(){
40         leaderX=leaderX+(targetX-leaderX)/10;
41         leaderY=leaderY+(targetY-leaderY)/10;
42         image.style.left=leaderX+"px";
43         image.style.top=leaderY+"px";
44     },10)
45 
46 </script>

运行效果:

 

以上是关于第43天:事件对象event的主要内容,如果未能解决你的问题,请参考以下文章

第43天python学习re模块学习

第54天:Python 多线程 Event

第54天:Python 多线程 Event

第21天SQL进阶-查询优化- performance_schema系列三:事件记录(SQL 小虚竹)

第21天SQL进阶-查询优化- performance_schema系列三:事件记录(SQL 小虚竹)

Python学习第10天