鼠标事件--物体跟着鼠标动
在讲述鼠标事件之前先讲一个对象--event：
event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行.
例子：event事件：点击任何位置显示当前位置的横纵坐标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="aaa"></input>
<script type="text/javascript">
window.onload=function(){
document.onclick=function(ev){
var oEvent=ev||event;
alert(oEvent.clientX+','+oEvent.clientY);
}
}
</script>
</body>
</html>
注意：event的兼容性处理 var oEvent=ev||event;
用全局对象的表示与用body对象表示的区别：body需要有东西撑起来，若没有东西，则无论点击那里都不会弹出位置。而document 一个全局对象 无论点击页面的哪个位置，都会显示提示当前的坐标。
例2：跟着鼠标跑的小方块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
</style>
</head>
<body style="height: 2000px;">
<div id="div1"></div>
<script type="text/javascript">
function getpos(ev)
{
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
}
document.onmousemove=function(ev){
var oDiv=document.getElementById('div1');
var oEvent=ev||event;
var pos=getpos(oEvent);
oDiv.style.left=pos.x+'px';
oDiv.style.top=pos.y+'px';
}
</script>
</body>
</html>
注意：鼠标 clientX，clientY为可视区坐标，而div的定位根据body定位，因此鼠标位置和div位置当可视区不一样时，会出现偏差。为防止宽高过大使小方块与鼠标出现距离 一般配合使用scrollTop、scrollLeft
scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
例：一串跟着鼠标跑的小方块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一串跟着跑的小方块</title>
<style type="text/css">
div{
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
function getpos(ev)
{
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
}
document.onmousemove=function(ev){
var div=document.getElementsByTagName('div');
var oEvent=ev||event;
var pos=getpos(oEvent);
for (var i = div.length-1; i > 0; i--) {
div[i].style.left=div[i-1].offsetLeft+'px';
div[i].style.top=div[i-1].offsetTop+'px';
}
div[0].style.left=pos.x+'px';
div[0].style.top=pos.y+'px';
}
</script>
</body>
</html>
注意：原理与上一个例子相同，不同之处在于第一个小方块跟着鼠标跑，通过循环控制后面的每一个小方块跟着前面的小方块跑。
