事件捕獲和事件冒泡詳解

事件的綁定

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);

結果：
    小明
結論：當阻止事件冒泡,只會觸發子類事件(節點)