[JavaScript] 事件物件與事件處理器
Introduction
事件處理器：
等同於下方
obj.onclick = function(){
alert('yoyo');
}
事件物件：
當事件被觸發，瀏覽器就會為這個事件創造一個物件，我們稱為事件物件(event object)，
此物件會包含跟當前的事件相關的所有資訊。例如滑鼠點擊的位置、按下鍵盤的哪個按鍵。
當事件被觸發，瀏覽器會為每個事件產生獨一無二的事件物件。
如果該事件有註冊事件處理器，則會把事件物件當成第一個參數丟給事件處理器處理。
Example
我們撰寫一個範例，將畫面上的一個小方塊，點一下跟著滑鼠移動，再點一下就放開。
<head>
<title>Box</title>
<script language="javascript">
//宣告 box 欄位
var box;
function init(){
//取得 id 為 "box" 物件，並且指定給 box 變數
box = document.getElementById("box");
//將 onclick 註冊給 pickup
box.onclick = pickup;
}
//撿起來
function pickup(){
//設定滑鼠移動時， box 跟著移動
document.onmousemove = move;
//將onclick註冊給putdown所以再次按下滑鼠的時候，就是放下
box.onclick = putdown;
}
function move(e){
if(!e){
e = window.event;
}
box.style.left = (e.clientX - 5) + "px";//若不加px，file fox會跑不起來。減5只是讓滑鼠留在方塊裡面
box.style.top = (e.clientY - 5) + "px";
}
//放下
function putdown(){
document.onmousemove = null;
box.onclick = pickup;//更改事件處理器
}
</script>
</head>
<body onLoad="init();">
<div id="box" style="position:absolute;left:10px;top:10px;background-color:#888888;width:50px;height:50px">
</div>
</body>
</html>
HEMiDEMi 的標籤：JavaScript
三小俠 小弟獻醜，歡迎指教