事件委托：

原理：事件委托是最好理解的那個(gè)，我們要給每一個(gè)按鈕綁定一個(gè)事件，但是這樣遍歷，太消耗性能了，于是我們直接給父元素綁定即可完成。解決了以下幾個(gè)問(wèn)題：
1、遍歷帶來(lái)的性能問(wèn)題。
2、button如果是動(dòng)態(tài)添加的，那么必須用事件委托。
3、由于事件委托是通過(guò)事件冒泡實(shí)現(xiàn)的，所以如果子級(jí)的元素(e.stopPropagation())阻止了事件冒泡，那么事件委托也將失效！

        <div class="btn-layout">
            <button>按鈕</button>
            <button>按鈕</button>
            <button>按鈕</button>
            <button>按鈕</button>
            <button>按鈕</button>
            <button>按鈕</button>
        </div>
        <script>
            document.getElementsByClassName("btn-layout")[0].onclick = function(e){
                console.log(e);
            }
        </script>

事件冒泡:

事件冒泡，就是點(diǎn)擊最里面的元素，會(huì)觸發(fā)父元素的方法，如下：

        <div id="a">
            最外層的元素
            <div id="b">
                中間的元素
                <div id="c">
                    最里面的元素
                </div>
            </div>
        </div>
        <script>
            document.getElementById("a").onclick = function(){
                console.log("a");
            }
            document.getElementById("b").onclick = function(){
                console.log("b");
            }
            document.getElementById("c").onclick = function(){
                console.log("c");
            }
            /*document.getElementById("a").addEventListener('click', function(){
                console.log('最外層元素 捕獲階段');
            },true);
            document.getElementById("b").addEventListener('click', function(){
                console.log('中間層元素 捕獲階段');
            },true);
            document.getElementById("c").addEventListener('click', function(){
                console.log('最里層元素 捕獲階段');
            },true);
            document.getElementById("a").addEventListener('click', function(){
                console.log('最外層 冒泡階段');
            },false);
            document.getElementById("b").addEventListener('click', function(){
                console.log('中間層 冒泡階段');
            },false);
            document.getElementById("c").addEventListener('click', function(){
                console.log('最里層 冒泡階段');
            },false);*/
        </script>

事件冒泡Demo

點(diǎn)擊最里面的元素后，會(huì)輸出，a,b,c，把父元素的方法也輸出了。解決辦法：

            document.getElementById("c").onclick = function(e){
                e.stopPropagation();
                console.log("c");
            }

把要冒泡的代碼，添加e.stopPropagation();阻止就可以完成，在微信小程序里，把bindTap改成catchTap。

事件流：

事件流包含三個(gè)階段：
事件捕捉階段：事件開(kāi)始由頂層對(duì)象觸發(fā)，然后逐級(jí)向下傳播，直到目標(biāo)元素；
處于目標(biāo)階段：處在綁定事件的元素上；
事件冒泡階段：事件由具體的元素先接收，然后逐級(jí)向上傳播，直到不具體的元素；

事件流

事件捕獲是從上到下，而時(shí)間冒泡，是從下到上，是相反的。我們用段代碼來(lái)證明一下：

        <div id="a">
            最外層的元素
            <div id="b">
                中間的元素
                <div id="c">
                    最里面的元素
                </div>
            </div>
        </div>
        <script>
            document.getElementById("a").addEventListener('click', function(){
                console.log('最外層元素 捕獲階段');
            },true);
            document.getElementById("b").addEventListener('click', function(){
                console.log('中間層元素 捕獲階段');
            },true);
            document.getElementById("c").addEventListener('click', function(){
                console.log('最里層元素 捕獲階段');
            },true);
            document.getElementById("a").addEventListener('click', function(){
                console.log('最外層 冒泡階段');
            },false);
            document.getElementById("b").addEventListener('click', function(){
                console.log('中間層 冒泡階段');
            },false);
            document.getElementById("c").addEventListener('click', function(){
                console.log('最里層 冒泡階段');
            },false);
        </script>

事件流Demo

點(diǎn)擊最里面的元素之后，輸出的結(jié)果，果然和事件流流程一模一樣。