js事件流的三个阶段

2019独角兽企业重金招聘Python工程师标准>>>

js事件流分为三个阶段：

 1、事件捕获：当某个元素出发某个事件，顶层对象document就会发出一个事件流， 随着DOM树的节点像目标元素节点流去，直到到达事件真正发生的目标元素。 

2、事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。

 3、事件冒泡：从目标元素开始，往顶层元素传播，途中如果有节点绑定了相应的事件处理函数，  这些函数就会被依次出发。

阻止事件冒泡的方法：

（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'); 
    } 
        
})

 

 

 

转载于:https://my.oschina.net/niejianbo/blog/638142