事件對象

在觸發DOM上的某個事件時，會產生一個事件對象event，event包含所有與事件有關的信息。

---

1. DOM中的事件對象
2. IE中的事件對象
3. 跨瀏覽器的事件對象

---

1.【DOM中的事件對象】

event的幾個常用屬性和方法

• type              事件類型
• target            事件的實際目標
• currentTarget     當前正在處理事件的元素（等於事件處理程序的this值）
• eventPhase        調用事件處理程序的階段（1：捕獲 2：處於目標 3：冒泡）
• preventDefault()  取消事件的默認行爲（當cancelable屬性爲true時可使用）
• stopPropagation() 取消事件的進一步傳播（捕獲or冒泡）

事件傳播順序：
    var btn = document.getElementById("btn");
    //目標階段
    btn.onclick = function(event){
        alert(event.eventPhase); //2
    }
    //捕獲階段
    document.body.addEventListener("click",function(event){
            alert(event.eventPhase); //1
    },true);
    //冒泡階段
    document.body.onclick = function(event){
        alert(event.eventPhase); //3
    };
// 1 2 3

---

2.【IE中的事件對象】

event屬性

• type             事件類型
• srcElement       事件的實際目標（與DOM中event的target一樣）
• cancelBubble     當爲true時，取消事件的進一步傳播（冒泡）與DOM中event的stopPropagation()一樣
• returnValue      當爲false時，取消事件的默認行爲（與DOM中event的preventDefault()一樣）

var btn = document.getElementById("btn");
    //DOM0級
    btn.onclick = function(event){
        alert(this); //[object HTMLInputElement]
        alert(event);//[object MouseEvent]
        alert(event.srcElement);//[object HTMLInputElement]
    };

    //IE
    btn.attachEvent("onclick",function(event){
        alert(this);   //[object window]   因爲IE事件處理程序在全局作用域中，this指向window
        alert(event);   //[object MSEventObj]
        alert(event.srcElement); //[object HTMLInputElement]
});

---

3.【跨瀏覽器的事件對象】

function handler(){
    alert("click!");
};
var EventUnit = {
    addHandler: function (element, type, handler) {
        //DOM2級事件處理程序
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        }
        //IE事件處理程序
        else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        }
        //DOM0級事件處理程序
        else {
            element["on" + type] = handler;
        }
    },
    //獲得event對象
    getEvent: function(event){
        return event ? event : window.event;
    },
    //獲得事件的目標
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    //取消事件的默認行爲
    preventDefault: function(event){
        if(event.preventDefault){
            event.preventDefault();
        }
        else{
            event.returnValue = false;
        }
    },
    removeHandler: function (element, type, handler) {
        //DOM2級刪除事件處理程序
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        }
        //IE刪除事件處理程序
        else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        }
        //DOM0級刪除事件處理程序
        else {
            element["on" + type] = null;
        }
    },
    //阻止事件流的傳播
    stopPropagation: function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }
        else{
            event.cancelBubble = true;
        }
    }
};
var btn = document.getElementById("btn");
btn.onclick = function(){
    var event = EventUnit.getEvent(event);  //放在開頭，可確保以後隨時使用event對象，不必考慮用戶使用什麼瀏覽器
    var target = EventUnit.getTarget(event);//返回事件的目標
    EventUnit.preventDefault(event); //取消事件的默認行爲
    EventUnit.stopPropagation(event); //阻止事件流
}
EventUnit.addHandler(btn,"click",handler); // 添加事件處理程序
EventUnit.removeHandler(btn,"click",handler); //刪除事件處理程序