鼠标移动对象：
onmousemove
事件对象：
在事件的响应函数被触发时，浏览器每一次都会将该事件对象作为实参传入响应函数
该事件对象包含了一切当前事件相关的一切信息，比如：鼠标的坐标，键盘上那个键被按下，鼠标滚轮滚动的方向
在IE8以及以下的浏览器中，响应函数被触发时，不会传递函数对象，而是将事件对象作为window对象的属性保存的（event）
练习：
1.显示鼠标在方块中的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0px;
padding:0px;
}
#box{
width:100px;
height:100px;
background-color: bisque;
}
#show{
margin-top:20px;
width:100px;
height:20px;
border:solid 1px darkcyan;
}
</style>
<script>
window.οnlοad=function(){
var box=document.getElementById("box");
var show=document.getElementById("show");
var Y;
var X;
//查看整个页面中的clientX，clientY
//在IE8以及以下，通过event来查看(window的属性)
box.οnmοusemοve=function(event){
//考虑兼容性，如果event不存在，
//就将event.window赋值给event
event=event||window.event;
Y=event.clientY;
X=event.clientX;
show.innerHTML="X="+X+" Y="+Y;
};
};
</script>
</head>
<body>
<div id="box"></div>
<div id="show"></div>
</body>
</html>2.拖动div小方块
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>*{
margin:0px;
padding:0px;
width:1000px;
width:1000px;}
#box{
width:100px;
height:100px;
background-color: royalblue;/*开启绝对定位,使方块可以移动*/
position:absolute;}
#show{
margin-top:120px;
width:100px;
height:30px;
border: solid2px bisque;}</style><script>
window.onload=function(){var box=document.getElementById("box");varY;varX;//修正方块的位置,让鼠标在方块的中心var top=box.offsetHeight/2;var left=box.offsetWidth/2;//在鼠标进入box的时候触发移动鼠标事件
box.onmousemove=function(){//这样，即使鼠标脱离了box，也可以让鼠标进行移动
document.onmousemove=function(event){
event=event||window.event;//获取鼠标的位置Y=event.clientY;X=event.clientX;//当页面有滚动条的时候，获取鼠标位置就变了.在滚动条下面的时候，方块就不会再向下移动了//原因：用clientY，X的时候他们有最大值，就是当前显示页面的高宽//通过scroll来修正水平，垂直偏移量//Chrome中偏移量通过document.body获得，而Firefox通过document.documentElement来获取/*var scrollY=document.documentElement.scrollTop;
var scrollX=document.documentElement.scrollLeft;*/var scrollY=document.body.scrollTop;var scrollX=document.body.scrollLeft;
show.innerHTML="X="+scrollX+" Y="+scrollY;//设置方块的位置//一般设置width都是以px为单位，得到的x，y是数字，加上px
box.style.top=Y-top+scrollY+"px";
box.style.left=X-left+scrollX+"px";};};};</script></head><body><div id="box"></div><div id="show"></div></body></html>也可以用pageY,pageX来获取当前鼠标的位置，但是IE8以及以下浏览器不支持
通过event来使用pageY，pageX（很好用的）