事件冒泡、事件捕获

含义理解

1.百度：当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。

2.事件冒泡：从事件源朝父级一直到根元素（HTML）。当某个元素的某类型事件被触发时，那么它的父元素同类型的事件也会被触发，一直触发到根源上；
从具体的元素到不确定的元素。

3.事件捕获： 从根元素（HTML）到事件源，当某个元素的某类型事件被触发时，先触发根元素的同类型事件，朝子一级触发，一直触发到事件源。
从不确定的元素到具体的元素；

DOM事件流

例子

以click点击事件为例。假如我们有一个多层结构标签。如下图，是4个div嵌套。每个div都有点击的监听事件，分别输出1234。当我们点击最里面的div时，点击事件开始传递，传递的全过程是1-2-3-4-4-3-2-1。
前半部分，事件从最外面的父div依次传递到最里面的后代div，1-2-3-4这部分我们叫捕获过程。
之后事件又从最里层的后代div逐层传出，4-3-2-1这部分我们叫冒泡过程

应用

事件委托起到优化的作用。当鼠标点击li元素时，如果字体颜色为黑色就变成红色，如果是红色就变成黑色。
当点击li元素时，利用事件冒泡机制最终将冒泡到ul,因此直接将事件委托到ul父元素，而不需要给每个li元素添加事件。

//html
 <ul id="ul">
        <li>red</li>
        <li>blue</li>  
        <li>purple</li>
        <li>orange</li> 
    </ul>
//javascript
 window.onload = function(){
        let ul = document.getElementById('ul');
        ul.addEventListener('click',function(e){
            var e = window.event || e;
            if(e.target.nodeName.toLowerCase() == "li"){
                //alert( e.target.style.color)
               if(e.target.style.color == "black"){
                   e.target.style.color = "red";
               }else{
                   e.target.style.color = "black"
               }
            }
        },false)
    }