js事件流的三個階段

js事件流分爲三個階段：

 一、事件捕獲：當某個元素出發某個事件，頂層對象document就會發出一個事件流， 隨着DOM樹的節點像目標元素節點流去，直到到達事件真正發生的目標元素。 

二、事件目標：當到達目標元素以後，執行目標元素該事件相應的處理函數。

 三、事件冒泡：從目標元素開始，往頂層元素傳播，途中若是有節點綁定了相應的事件處理函數，  這些函數就會被依次出發。

阻止事件冒泡的方法：

（1）能夠使用e.stopPropagation()（Firefox）  或者e.cancelBubble=true（IE）來組織事件的冒泡。

（2）判斷event.target 是否等於event.currenttarget

事件委託

 因爲js中對dom操做會產生事件冒泡，會形成內存泄露和性能消耗，使用事件委託能避免。

一個經典的例子：實現一個函數，當點擊頁面中的任何元素時都alert出元素的名稱。

function getElementName(){

    var body = document.getElmentsByTagName("body")[0];

    body.onclick = function(ev){

        var event = ev || window.event;

        var target = event.target || window.srcElement;

        if(target){

            alert(target.nodeName.toLowerCase())

        }

    }

}

實現事件委託的方式

    第一種：原生js   

var body = document.getElementByTagName('body')[0];

    body.addEventListener('click',function(event){

        event = EventUtil.getEvent(event);

        var target = EventUtil.getTarget(event);

        switch(target.id){

            case "id_1": function(){};break;

            case "id_2": function(){};break;

        }

    })

第二種：jquery

$('body').on('click','li',function(){ 
    if(!$(this).attr('s')) { 
        $(this).css('background','red'); 
        $(this).attr('s',true); 
    }else { 
        $(this).css('background','#fff'); 
         $(this).removeAttr('s'); 
    } 
        
})