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

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

例子：

<ul id="ull">
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
</ul>

//一般写法
    var li=document.getElementsByTagName("li");
    for(var i=0;i<li.length;i++){
        li[i].onclick=function () {
            console.log("1")
        }
    }
//缺点：绑定多个事件，并且如果后续有新添加的节点li，需要重新绑定onclick事件

//事件代理
    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)

<div id="div2">
    <ul id="ull">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</div>

假设给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，则表示在事件捕获阶段调用处理函数

<div  id="div1" style="width: 500px;background-color: yellow">
    <div id="div2" style="width: 50%;background-color: aqua;margin: 0 auto">
        <ul id="ull" style="width: 50%;background-color: coral;margin: 0 auto">
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
    </div>
</div>

//事件捕获
    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