JavaScript事件委托与事件冒泡

事件委托：

原理：事件委托是最好理解的那个，我们要给每一个按钮绑定一个事件，但是这样遍历，太消耗性能了，于是我们直接给父元素绑定即可完成。解决了以下几个问题：
1、遍历带来的性能问题。
2、button如果是动态添加的，那么必须用事件委托。
3、由于事件委托是通过事件冒泡实现的，所以如果子级的元素(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>

事件冒泡:

事件冒泡，就是点击最里面的元素，会触发父元素的方法，如下：

        <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

点击最里面的元素后，会输出，a,b,c，把父元素的方法也输出了。解决办法：

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

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

事件流：

事件流包含三个阶段：
事件捕捉阶段：事件开始由顶层对象触发，然后逐级向下传播，直到目标元素；
处于目标阶段：处在绑定事件的元素上；
事件冒泡阶段：事件由具体的元素先接收，然后逐级向上传播，直到不具体的元素；

事件流

事件捕获是从上到下，而时间冒泡，是从下到上，是相反的。我们用段代码来证明一下：

        <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

点击最里面的元素之后，输出的结果，果然和事件流流程一模一样。