事件捕获和事件冒泡详解

事件的绑定

addEventListener 和事件绑定on的区别
    addEventListener可以给一个元素绑定多个相同的事件,且保证全都会被执行
    使用on绑定的多个事件会被最后一个事件覆盖

移除事件绑定:removeEventListener

事件捕获和冒泡

事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。
相反的，事件冒泡是自下而上的去触发事件。
绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。
true,事件捕获；false,事件冒泡。默认false,即事件冒泡。
Jquery的ev.stopPropagation()/ev.cancelBubble = true来阻止冒泡，不让事件继续冒泡。意思就是到我为止，父辈和爷爷辈的事件就不要触发了。

实例:
    <div class="box">
        <div class="mid">
            <div class="item"></div>
        </div>
    </div>
    <script type="text/javascript">
        var box = document.getElementsByClassName("box")[0];
        var mid = document.getElementsByClassName("mid")[0];
        var item = document.getElementsByClassName("item")[0];

        box.addEventListener("click",function(){
            console.log("小明的爷爷");
        },false);
        mid.addEventListener("click",function(){
            console.log("小明的爸爸");
        },false);
        item.addEventListener("click",function(ev){
            console.log("小明");
        },false);
    </script>

结果：
    小明
    小明的爸爸
    小明的爷爷
结论：事件的触发顺序自内向外，这就是事件冒泡。

        box.addEventListener("click",function(){
            console.log("小明的爷爷");
        },true);
        mid.addEventListener("click",function(){
            console.log("小明的爸爸");
        },true);
        item.addEventListener("click",function(ev){
            console.log("小明");
        },true);

结果：
    小明的爷爷
    小明的爸爸
    小明
结论：事件触发顺序变更为自外向内，这就是事件捕获

阻止事件冒泡

    item.addEventListener("click",function(ev){
        // 取消冒泡 不让事件继续冒泡 阻止事件冒泡
        1.ev.cancelBubble = true;
        2.stopPropagation();// 2

        // 兼容写法
        if (ev.stopPropagation) {
            ev.stopPropagation();
        } else {
            ev.cancelBubble = true;
        }


        console.log("小明");

        // 阻止默认事件
        // ev.preventDefault();
        // ev.returnValue = false;
        // return false;
    },false);

结果：
    小明
结论：当阻止事件冒泡,只会触发子类事件(节点)