JavaScript事件委托与事件冒泡

事件委托：

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

        

            按钮
            按钮
            按钮
            按钮
            按钮
            按钮
        
        

事件冒泡:

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

        

            最外层的元素
            

                中间的元素
                

                    最里面的元素
                
            
        
        

事件冒泡Demo

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

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

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

事件流：

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

事件流

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

        

            最外层的元素
            

                中间的元素
                

                    最里面的元素
                
            
        
        

事件流Demo

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