摘要：事件流事件流描述的是頁面接收事件的順序的事件流是冒泡流而的事件流是事件捕獲流事件冒泡是指事件開始時由最具體的元素，然后向上傳播到較為不具體的節點所有現代瀏覽器都支持事件冒泡則將事件一直冒泡到對象事件捕獲是不太具體的節點應該更早接收到事件而具

事件流描述的是頁面接收事件的順序.IE的事件流是冒泡流,而 Netscape Communicator的事件流是事件捕獲流.

事件冒泡是指事件開始時由最具體的元素，然后向上傳播到較為不具體的節點.所有現代瀏覽器都支持事件冒泡,IE9,Firefox,chrome,safari則將事件一直冒泡到window對象.

事件捕獲是不太具體的節點應該更早接收到事件,而具體的節點應該最后接收到事件.

DOM事件流
DOM2級事件流規定的事件流包括三個階段: 事件捕獲階段 處于目標階段 事件冒泡階段

以on+事件名(例如onclick)作為事件目標的屬性,屬性值為事件處理程序,在html中定義的事件處理程序可以包含要執行的具體動作,也可以調用頁面其他地方定義的腳本.

function showMessage(){
    alert("Hello world!");
}

DOM0級事件處理程序是在js中處理的，它的優勢是簡單,目前所有瀏覽器支持良好，并且不會與html代碼產生耦合.

 var btn =  document.getElementById("btn");
 btn.onclick  = function(){
     alert("clicked me！");
 };

這里是把事件處理程序賦值給了DOM對象的屬性,這個屬性的構成是on+事件名,比如onclick`onblur`onload.

DOM2級事件定義了兩個方法addEventListener removeEventListener，這兩個方法都接收三個參數.第一個參數代表事件類型;第二個參數代表事件處理程序;第三個參數是指在冒泡階段還是捕獲階段處理事件處理程序,如果為true代表捕獲階段處理,如果是false代表冒泡階段處理.
IE9，google，Firefox兼容DOM2級事件處理程序.

    var btn = document.getElementById("btn");
    
    //事件處理程序
    function handler(){
        alert("click!");
    }
    
    //注冊事件處理程序
    addEventListener("click",handler,false);
    
    //注銷事件處理程序
    removeEventListener("click",handler,false);

注:添加匿名事件處理程序無法被注銷

IE8及以下瀏覽器不支持DOM2級事件處理程序,但也自己定義了attachEvent`detachEvent`兩個方法,這兩個方法只接受兩個參數,因為IE8及以下版本不支持事件捕獲,所以沒有第三個參數.

var btn = document.getElementByID("btn");

    //事件處理程序
    function handler(){
        alert("click!");
    }
    
    //注冊事件處理程序
    attachEvent("click",handler,false);
    
    //注銷事件處理程序
    detachEvent("click",handler,false);

綜合以上幾種事件處理程序,我們封裝出了一個跨瀏覽器的事件處理程序對象.

    var EventUtil ={
    
        //注冊事件處理程序
        addEventHandler:function(element,type,handler){
        
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }
            
            else if(element.attachEvent) {
                element.attachEvent("on"+type,handler);
            }
            
            else{
                element["on"+type]=handler;
            }
        },
        
        //注銷事件處理程序
        removeEventHandler:function(element,type,handler){
        
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
            }
            
            else if(element.detachEvent){
                element.detachEvent("on"+type,handler);
            }
            
            else{
                element["on"+type]=null;
            }
        }
    };

    var btn = document.getElementById("btn"),
            handler=function(event){
                alert(this.value);
            };

    EventUtil.addEventHandler(btn,"click",handler);

在觸發DOM的某個事件時,會產生一個事件對象,這個對象包含著所有與事件相關的信息。包括導致事件的元素,事件的類型,以及其他與特定事件相關的信息.例如鼠標操作導致的事件對象中,包含鼠標位置的信息,鍵盤定義的事件中包含按下鍵相關的信息.所有瀏覽器支持event對象,但支持方式不同.

兼容DOM的瀏覽器會將一個event對象傳入到事件處理程序中.DOM0和DOM2都會傳入event. html事件處理程序也有event對象.

 var btn = document.getElementById("btn");
 
 btn.onclick = function(event){
     alert(event.type);
 }
 
 btn.addEventHandler("click",function(event){
     alert(event.type);
 },false);

觸發的事件類型不一樣,可用的屬性和方法也不一樣.不過所有事件的event對象都有公共成員,這里列出幾個常用的屬性和方法.

屬性
currentTarget 指向某個元素,事件處理程序發生在此元素上
target 事件的目標
type 事件類型
eventPhase 事件所處階段

事件
preventDefault() 取消事件的默認行為
stopPropagation() 取消事件的進一步冒泡或捕獲
在事件處理程序內部,對象this始終等于currentTarget的值.而target則只包含事件的實際目標.

使用DOM0級事件處理程序時,event對象作為window對象的一個屬性存在;
使用attachEvent()事件處理程序時,event對象作為參數傳入.

var EventUtil = {

    //添加事件
    addEventHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }
        else if(element.attachEvent) {
            element.attachEvent("on"+type,handler);
        }
        else{
            element["on"+type]=handler;
        }
    },
    
    //移除事件
    removeEventHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }
        else if(element.detachEvent){
            element.detachEvent("on"+type,handler);
        }
        else{
            element["on"+type]=null;
        }
    },
    
    //獲取事件對象
    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;
        }
    },
    
    //阻止事件冒泡
    stopPropagation:function(event){
        if(event.stopPropagation)
        {
            event.stopPropagation();
        }
        else{
            event.cancelBubble=true;
        }
    }
};

使用以上定義的EventUtil對象,可以在所有瀏覽器中進行進行事件的添加,移除,獲取事件對象,獲取事件目標,阻止事件冒泡,阻止事件默認行為.