一、事件對象
事件：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>
運作效果：
![event事件對象[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)