摘要：事件流事件流描述的是頁(yè)面接收事件的順序的事件流是冒泡流而的事件流是事件捕獲流事件冒泡是指事件開(kāi)始時(shí)由最具體的元素，然后向上傳播到較為不具體的節(jié)點(diǎn)所有現(xiàn)代瀏覽器都支持事件冒泡則將事件一直冒泡到對(duì)象事件捕獲是不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件而具

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

事件冒泡是指事件開(kāi)始時(shí)由最具體的元素，然后向上傳播到較為不具體的節(jié)點(diǎn).所有現(xiàn)代瀏覽器都支持事件冒泡,IE9,Firefox,chrome,safari則將事件一直冒泡到window對(duì)象.

事件捕獲是不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件,而具體的節(jié)點(diǎn)應(yīng)該最后接收到事件.

DOM事件流
DOM2級(jí)事件流規(guī)定的事件流包括三個(gè)階段: 事件捕獲階段 處于目標(biāo)階段 事件冒泡階段

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

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

DOM0級(jí)事件處理程序是在js中處理的，它的優(yōu)勢(shì)是簡(jiǎn)單,目前所有瀏覽器支持良好，并且不會(huì)與html代碼產(chǎn)生耦合.

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

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

DOM2級(jí)事件定義了兩個(gè)方法addEventListener removeEventListener，這兩個(gè)方法都接收三個(gè)參數(shù).第一個(gè)參數(shù)代表事件類(lèi)型;第二個(gè)參數(shù)代表事件處理程序;第三個(gè)參數(shù)是指在冒泡階段還是捕獲階段處理事件處理程序,如果為true代表捕獲階段處理,如果是false代表冒泡階段處理.
IE9，google，F(xiàn)irefox兼容DOM2級(jí)事件處理程序.

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

注:添加匿名事件處理程序無(wú)法被注銷(xiāo)

IE8及以下瀏覽器不支持DOM2級(jí)事件處理程序,但也自己定義了attachEvent`detachEvent`兩個(gè)方法,這兩個(gè)方法只接受兩個(gè)參數(shù),因?yàn)镮E8及以下版本不支持事件捕獲,所以沒(méi)有第三個(gè)參數(shù).

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

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

綜合以上幾種事件處理程序,我們封裝出了一個(gè)跨瀏覽器的事件處理程序?qū)ο?

    var EventUtil ={
    
        //注冊(cè)事件處理程序
        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;
            }
        },
        
        //注銷(xiāo)事件處理程序
        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);

在觸發(fā)DOM的某個(gè)事件時(shí),會(huì)產(chǎn)生一個(gè)事件對(duì)象,這個(gè)對(duì)象包含著所有與事件相關(guān)的信息。包括導(dǎo)致事件的元素,事件的類(lèi)型,以及其他與特定事件相關(guān)的信息.例如鼠標(biāo)操作導(dǎo)致的事件對(duì)象中,包含鼠標(biāo)位置的信息,鍵盤(pán)定義的事件中包含按下鍵相關(guān)的信息.所有瀏覽器支持event對(duì)象,但支持方式不同.

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

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

觸發(fā)的事件類(lèi)型不一樣,可用的屬性和方法也不一樣.不過(guò)所有事件的event對(duì)象都有公共成員,這里列出幾個(gè)常用的屬性和方法.

屬性
currentTarget 指向某個(gè)元素,事件處理程序發(fā)生在此元素上
target 事件的目標(biāo)
type 事件類(lèi)型
eventPhase 事件所處階段

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

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

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;
        }
    },
    
    //獲取事件對(duì)象
    getEvent: function (event) {
        return event ? event : window.event;
    },
    
    //獲取事件目標(biāo)
    getTarget:function(event){
        return event.target || event.srcElement;
    },
    
    //阻止默認(rèn)行為
    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對(duì)象,可以在所有瀏覽器中進(jìn)行進(jìn)行事件的添加,移除,獲取事件對(duì)象,獲取事件目標(biāo),阻止事件冒泡,阻止事件默認(rèn)行為.