事件委托与冒泡、事件捕获

事件委托：利用冒泡的原理，把事件加到父级上，触发执行效果。

例子：

    
1
    
1
    
1
    
1
    
1
    
1
    
1

//一般写法
    var li=document.getElementsByTagName("li");
    for(var i=0;i

//事件代理
    var ull=document.getElementById("ull");
    ull.addEventListener("click",function (e) {
        var target=e.target;
        if(target.nodeName.toUpperCase()=="LI") {
            console.log("1")
            stopPropagation(e)//阻止继续向上冒泡
        }
    });

事件冒泡：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。(target-body-html-document)

    

        
1
        
1
        
1
        
1
        
1
        
1
        
1
    

假设给div和li都绑定了click事件，那么当点击li时，会先后(从内到外)触发这两个click事件，如果不想要这样的结果，那么就需要阻止冒泡

//阻止事件冒泡
    function stopPropagation(e) {
        if (e.stopPropagation) {
            e.stopPropagation();//Firefox
        } else {
            e.cancelBubble = true;//IE
        }
    }

事件捕获：与事件冒泡的顺序相反(IE没有事件捕获)

W3C模型

W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。
一般的绑定事件方式，如：onclick，采用的是冒泡方式。
但我们可以选择事件处理函数在哪一个阶段被调用。
addEventListener有三个参数：

element.addEventListener(event, function, useCapture)
//第三个参数默认值是false，表示在事件冒泡的阶段调用事件处理函数，如果参数为true，则表示在事件捕获阶段调用处理函数

    

        

            
1
            
1
            
1
            
1
            
1
            
1
            
1
        
    

//事件捕获
    var div1=document.getElementById("div1");
    var div2=document.getElementById("div2");
    var ull=document.getElementById("ull");
    div2.addEventListener("click",function () {
        console.log('div2')
    },true);    //捕获时执行
    div1.addEventListener("click",function () {
        console.log('div1')
    });//
    ull.addEventListener("click",function () {
        console.log('ull')
    });
    
    //点击ul，依次打印出div2，ull，div1

参考：
https://segmentfault.com/a/1190000000749838
http://www.jb51.net/article/42492.htm