刚看了一下事件对象，即是event对象，表示当一个对象发生事件时，与这个对象相关的一些详细信息会保存到event对象中，以方便这个对象调用。低版本IE、chrome和标准浏览器的事件对象不一样。在低版本IE、chrome下，event是一个内置的全局对象;而在标准的浏览器中，事件函数的第一个参数默认为时间对象，为了兼容这些浏览器的差异，一般做一个兼容处理：
document.onclick=function(ev){
var ev = ev || event;
..........
}
event对象常用的两个属性有clientX、clientY，不带有单位
clientX表示可视区下鼠标的位置到左侧的距离，clientY表示在可视区下鼠标位置到顶部的距离。
下面做两个小例子实践一下：
1、鼠标跟随div运动，主要使用event.clientX和event.clientY，再赋值给div的left和top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>event对象</title>
<style>
#div1{
width: 100px;
height: 100px;
background:red;
position: absolute;
}
</style>
</head>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
document.onmousemove=function(ev){
var ev=ev||event;
var scrollLeft=document.documentElement.scrollLeft+document.body.scrollLeft;
var scrollTop=document.documentElement.scrollTop+document.body.scrollTop;
oDiv.style.left=ev.clientX+scrollLeft+'px';
oDiv.style.top=ev.clientY+scrollTop+'px';
}
}
</script>
<body style='height:2000px'>
<div id="div1"></div>
</body>
</html>
2、鼠标拖拽div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
#div1{ width: 100px;height: 100px;background: red;position: absolute; }
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmousedown=function(ev){
var ev=ev||event;
var disX=ev.clientX-this.offsetLeft;
var disY=ev.clientY-this.offsetTop;
document.onmousemove=function(ev){
var ev=ev||event;
oDiv.style.left=ev.clientX-disX+'px';
oDiv.style.top=ev.clientY-disY+'px';
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
动态效果在这很难展现出来~