第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>

运行效果:

 

posted @ 2017-09-25 23:00  半指温柔乐  阅读(194)  评论(0编辑  收藏  举报