js事件流的三個階段

js事件流分爲三個階段:

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

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

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

阻止事件冒泡的方法:

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

(2)判斷event.target 是否等於event.currenttarget函數

事件委託

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

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

function getElementName(){spa

    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'); 
    } 
        
})
相關文章
相關標籤/搜索