摘要：同樣還是用上面冒泡例子，則事件的傳播順序則是特別說明之前不支持事件捕獲，，，，，目前支持良好。取決于指定事件處理程序的方法。

第一次在segmentfault寫文章，希望通過這種方式來鞏固所學的知識，也歡迎童鞋們指正其中有不對和錯誤的地方。^+^

事件流

事件流：頁面中接收事件的順序,即當一個事件發(fā)生時，該事件的傳播過程便叫做事件流

事件冒泡

事件由最具體的元素開始逐級向上傳播至較為不具體的節(jié)點(文檔)

    
    


點我

當我們點擊id為box的div時，該點擊事件傳播順序如下

div --> body --> html -->document

特別說明：IE5.5及更早的版本將繞過html節(jié)點直接到document，IE9，F(xiàn)irefox，chrome和safari將冒泡到window對象

事件捕獲

事件捕獲和事件冒泡似乎截然相反，由不太具體的節(jié)點先接收到事件 -->再到最具體的節(jié)點。同樣還是用上面冒泡例子，則事件的傳播順序則是：
document --> html -->body -->div

特別說明：ie8之前不支持事件捕獲，IE9，safari，chrome，opera，firefox目前支持良好。并且這些瀏覽器不是從document開始捕獲，而是從window對象開始。

捕獲階段

目標階段

冒泡階段

以上面的代碼為例子，由圖可以很清晰地看出首先發(fā)生的是事件捕獲-->實際的目標接收事件-->事件冒泡

特別說明:在DOM事件流中，實際的目標不會在捕獲階段接收到事件，即捕獲階段到body就停止，"下一階段"是目標階段，該階段可以看成是事件冒泡的一部分，最終事件又被傳播會document。
BUT :我們的各大瀏覽器總是不喜歡按照規(guī)范來，IE9，Safari，chrome，firefox及其更高的版本中都會在捕獲階段出發(fā)事件對象上的事件，最后導致有兩個機會在目標對象上操作事件。

事件處理程序

事件：用戶或者瀏覽器自身執(zhí)行的某個動作，比如load，click，mousemove等
事件處理程序：相應(yīng)某個事件的函數(shù)叫做事件處理函數(shù)（也叫做事件偵聽器）

1 html事件處理程序：某個元素支持的某個事件可以用與事件處理程序同名的html特性來指定，該特性的值是能夠執(zhí)行的javascript代碼。

/*
   當點擊該按鈕的時候，瀏覽器會彈出"我被點擊了";
*/

當然也可以給onclick賦值頁面中其他地方定義的腳本

優(yōu)點：簡單明了，省去獲取元素等一系列前提操作
缺點：html代碼與js代碼高度耦合，不符合分離原則

2 DOM0級別事件處理函數(shù)：使用 element.on[eventname]=fn的方式給元素添加事件

3 DOM2級事件處理程序：DOM2級添加了addEventListener（添加事件處理程序）和removeEventListener(移除事件處理程序)
添加事件處理函數(shù)

移除事件處理函數(shù)：如果事件處理函數(shù)是有名函數(shù)，則可以通過名字來移除，匿名函數(shù)無法移除。

4IE事件處理程序：ie實現(xiàn)了與dom類似的兩個方法，attachEvent（添加），detachEvent（刪除）
添加事件處理函數(shù)

刪除事件處理函數(shù)

綁定 為了解決attachEvent的this指向問題，并且可以通過有名稱的函數(shù)來解除事件綁定，現(xiàn)在處理如下

//
   function bind(obj,eventName,fn){
        var _fn=fn;
        fn=function(){
            _fn.call(obj);//改變this指向
        };
        if(obj.addEventListener){
            obj.addEventListener(eventName,fn,false);
        }else{
            obj.attachEvent("on"+eventName,fn);
        }
        return fn;//用于事件解除
    }

解除

     function unbind(obj,eventName,fn){
        if(obj.removeEventListener){
            obj.removeEventListener(eventName,fn);
        }else{
            obj.detachEvent("on"+eventName,fn);
        }
    }

使用方式

    //給input添加和移除事件
    
    //添加
    function show( ){
        alert(this);
    }
    function show2( ){
        alert(this.id);
    }
    
    var removeFn=bind("box","click",show);//需要移除的事件處理程序，不是原程序名稱show
    bind("box","click",show2);
    unbind("box","click",removeFn);
    //最后只會彈出 box
    

當觸發(fā)DOM上面的某個事件的時候，會產(chǎn)生一個事件對象event,這個對象中包含著所有與事件對象有關(guān)的信息。例如該事件類型，導致事件的元素等

DOM中的事件對象：兼容DOM的瀏覽器會將event對象傳入到事件處理程序中，無論指定事件處理程序用什么方式(html方式，DOM0級方式，DOM2級方式)

    
    //html方法  click
   var oBox=document.getElementById("box");
    //DOM0級別方法 click
        oBox.onclick=function(ev){
            console.log(ev.type);//click
        }
    ///DOM2級別方法 click
    oBox.addEventListener("click",function(ev){
            console.log(ev.type);//click
        })     

總的來說event對象包含與創(chuàng)建他的特定事件有關(guān)的屬性和方法，但是觸發(fā)的事件類型不同，則可用的屬性和方法也不一樣。但是都會包含以下成員

特別說明：只有在事件處理程序被執(zhí)行的期間，event對象才會存在，一旦事件處理程序執(zhí)行完成，其就會被銷毀。

與訪問DOM中的事件對象不同，要訪問IE中的event對象有幾種不同的方式。取決于指定事件處理程序的方法。

html event

函數(shù)參數(shù)

window.event

同樣IE中的event對象也包含著與創(chuàng)建他的事件相關(guān)的屬性和方法，其中很多的屬性和方法都有對應(yīng)的或者是相關(guān)的DOM屬性和方法。當然也會事件的不同，其屬性和方法也會有所不同，但是都會包含下表內(nèi)容

我們?yōu)閑ventUtil添加幾個方法，以此來達到有關(guān)event對象的常用的跨瀏覽器的使用目標

getEvent() 獲取事件對象

getTarget()獲取事件源

stopPropagation() 取消冒泡

preventDefault() 阻止默認行為

   var eventUtil={
        getEvent:function(ev){
            return ev || window.event;//獲取事件對象
        },
        getTarget:function(ev){
            return ev.target || ev.srcElement;//獲取事件源
        },
        stopPropagation:function(ev){//阻止冒泡
            if(ev.stopPropagation){
                ev.stopPropagation();
            }else{
                ev.cancelBubble=true;
            }
        },
        preventDefault:function(ev){//阻止默認行為
            if(ev.preventDefault){
                ev.preventDefault();
            }else{
                ev.returnValue=true;
            }
        }
    }

說明：需要給頁面中成百上千個li綁定一個事件并且輸出當前元素的innerHTML
常見做法

    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10
    

    var aLi  //假設(shè)已經(jīng)獲取了這組li元素
    for(var i=0;i
這種方式通過遍歷DOM節(jié)點的方式添加事件處理程序有諸多缺點，比如性能大大減低，新添加的li不具備click事件等。
利用事件委托（冒泡原理）
    var oUl//假設(shè)oUl是li的父節(jié)點
    oUL.onclick=fuction(ev){
        var ev=eventUtil.getEvent(ev);
        var target=eventUtil.getTarget(ev);
            console.log(target.innerHTML);
    }
利用事件委托可以大大地提高性能，后面隨時添加的元素都可以擁有這個點擊事件等