event:事件对象，当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象，供我们在需要的时候调用。飞机-黑匣子。
事件对象必须在一个事件调用的函数里面使用才有内容
事件函数：事件调用的函数，一个函数是不是事件函数，不在定义的决定，而是取决于这个调用的时候
兼容：
ie/chrome:event是一个内置全局对象
标准下（火狐）：事件对象是通过事件函数的第一个参数传入
如果一个函数是被事件调用的那么这个函数定义的第一个参数就是事件对象
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<script>
alert(event);//这里没事件发生
</script>
</head>
<body>
</body>
</html>
标准下（火狐）：事件对象是通过事件函数的第一个参数传入
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<script>
function fn1(){
alert(event);
}
fn1();//不是事件调用的函数
document.onclick = fn1();//是事件调用的函数，所以event有内容
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<script>
function fn1(ev){
var ev = ev || event;
alert(ev);
}
document.onclick = fn1;//是事件调用的函数，所以event有内容
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<script>
function fn1(ev){
var ev = ev || event;
alert(ev);
for(var attr in ev){
console.log(attr + '=' + ev[attr]);
}
}
document.onclick = fn1;//是事件调用的函数，所以event有内容
</script>
</head>
<body>
</body>
</html>
onmousemove:当鼠标在一个元素上面移动的触发
触发频率不是像素，而是间隔时间，在一个指定时间内（很短），如果鼠标的位置和上一次的位置发生了变化，那么就会触发一次
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
#div1{width: 100px;height: 100px;background: red;position: absolute;}
</style>
<script>
window.onload = function(){
var i=0;
document.onmousemove = function(){
document.title = i++;
} }
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
clientX[Y]:当一个事件发生的时候，鼠标到页面可视区的距离
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
#div1{width: 100px;height: 100px;background: red;position: absolute;}
</style>
<script>
window.onload = function(){
var i=0;
var oDiv = document.getElementById('div1');
document.onmousemove = function(ev){
var ev = ev || event;
oDiv.style.left = ev.clientX +'px';
oDiv.style.top = ev.clientY + 'px';
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
红方块跟着鼠标走
注意：添加了一个高度，就出现问题了
ji
给的短了，所以显示出来就是方块在鼠标的上面，要想正常显示要加上滚动条滚动的距离
解决上面问题的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
#div1{width: 100px;height: 100px;background: red;position: absolute;}
</style>
<script>
window.onload = function(){
var i=0;
var oDiv = document.getElementById('div1');
document.onmousemove = function(ev){
var ev = ev || event;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
oDiv.style.left = ev.clientX +'px';
oDiv.style.top = ev.clientY + scrollTop+'px';
}
}
</script>
</head>
<body style="height: 2000px;">
<div id="div1"></div>
</body>
</html>