第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>
运行效果：
