js event-事件物件和clientX,clientY
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>