Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
今天跟大家分享的就是其中一个，获取坐标。
获取坐标的方法有很多种，可以根据需要使用。
获取X坐标的属性：clientX; screenX; pageX;
获取X坐标的属性：clientY; screenY; pageY;
我比较喜欢用page属性，它能获取到超出窗体高度的坐标。也就是当有滚动条时并且触发事件的地方超出高度后client 和 screen就获取不到坐标了而page就没有这个缺点。有兴趣的同学可以自己尝试一下。
接下来给大家展示我自己写的一个测试的实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
height: 2000px;
}
#coor{
background-color: #000000;
color: white;
cursor: crosshair;
font-size: 20px;
}
#bo{
background-color: white;
}
#b1{
background-color: red;
}
#b2{
background-color: yellow;
}
#b3{
background-color: blue;
}
#b4{
background-color: brown;
}
#b5{
background-color: lawngreen;
}
#b6{
background-color: blueviolet;
}
.bb{
position: absolute;
width: 50px;
height: 50px;
cursor: crosshair;
border-radius:50% ;
}
</style>
</head>
<body id="coor" onmousemove="fn(event)">
<div id="b1" class="bb"></div>
<div id="b2" class="bb"></div>
<div id="b3" class="bb"></div>
<div id="b4" class="bb"></div>
<div id="b5" class="bb"></div>
<div id="b6" class="bb"></div>
<div id="bo" class="bb" onmousemove="fn(event)"></div>
<script type="text/javascript">
function fn(e){ //鼠标悬浮事件
var obj = document.getElementById("coor"); //获取节点对象
var bo = document.getElementById("bo");
var b1 = document.getElementById("b1");
var b2 = document.getElementById("b2");
var b3 = document.getElementById("b3");
var b4 = document.getElementById("b4");
var b5 = document.getElementById("b5");
var b6 = document.getElementById("b6");
var x = e.pageX;//通过Event对象点出page属性获取事件发生时的水平坐标
var y = e.pageY;//通过Event对象点出page属性获取事件发生时的垂直坐标
bo.style.left = (x-25) + "px";
bo.style.top = (y-25) + "px";
var s = setInterval(bbbb, 300); //时间函数第一个参数为要执行的方法，第二个参数为时间的间隔
function bbbb(){
b1.style.left = (x-25) + "px";
b1.style.top = (y-25) + "px";
clearInterval(s);
}
var ss = setInterval(cccc, 250);
function cccc(){
b2.style.left = (x-25) + "px";
b2.style.top = (y-25) + "px";
clearInterval(ss);
}
var sss = setInterval(dddd, 200);
function dddd(){
b3.style.left = (x-25) + "px";
b3.style.top = (y-25) + "px";
clearInterval(sss);
}
var ssss = setInterval(xxx, 150);
function xxx(){
b4.style.left = (x-25) + "px";
b4.style.top = (y-25) + "px";
clearInterval(ssss);
}
var sssss = setInterval(yyy, 100);
function yyy(){
b5.style.left = (x-25) + "px";
b5.style.top = (y-25) + "px";
clearInterval(sssss);
}
var ssssss = setInterval(zzz, 50);
function zzz(){
b6.style.left = (x-25) + "px";
b6.style.top = (y-25) + "px";
clearInterval(ssssss);
}
}
</script>
</body>
</html>