事件传播流程

事件的处理过程主要有三个阶段：捕获阶段，目标阶段，冒泡阶段；

（1）捕获：当我们在 DOM 树的某个节点发生了一些操作（例如单击、鼠标移动上去），就会有一个事件发射过去。这个事件从 Window 发出，不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程，就是捕获阶段（Capture Phase）。（所有经过的节点，都会触发这个事件。捕获阶段的任务就是建立这个事件传递路线，以便后面冒泡阶段顺着这条路线返回 Window。）
（2）目标阶段：当事件不断的传递直到目标节点的时候，最终在目标节点上触发这个事件，就是目标阶段。
（3）冒泡阶段：事件冒泡即事件开始时，由最具体的元素接收（也就是事件发生所在的节点），然后逐级传播到较为不具体的节点（我们平时用的事件绑定就是利用的事件冒泡的原理）

实验代码：
html:

<div class="a">
        <li class="b">
          <a href="#" class="c">buhuo</a>
        </li>
      </div>

js:

        var li = document.getElementsByClassName('b')[0];
        var a = document.getElementsByClassName('c')[0];
        
        
        //第三个参数默认是false,
        //是对事件冒泡过程添加函数进行处理
        div.addEventListener('click',function(event){
        console.log('div');
        });
        li.addEventListener('click',function(event){
        console.log('li');
        });
        a.addEventListener('click',function(event){
        console.log('a');
        });
        
        
        //事件捕获过程处理
        //第三个参数设为true
        div.addEventListener('click',function(event){
        console.log('div');
        },true);
        li.addEventListener('click',function(event){
        console.log('li');
        },true);
        a.addEventListener('click',function(event){
        console.log('a');
        },true);

运行结果：

总结：首先是捕获阶段执行，再是冒泡阶段。 任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达事件源，再从事件源向上进行事件捕获（事件冒泡）。

这里说一下阻止事件冒泡的几个办法：
1、`function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble = true
}
return false;

2、function stopDault(e)
{
if (e && e.preventDefalut)
e.preventDefalut()
else
window.event.retuenValue = false

}
return false;

不得不提一下事件委托：将要添加给子元素的属性方法添加到父元素上。
事件委托的优点：

1. 提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。
2. 动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

参考文章1：https://blog.csdn.net/zhouwangling_/article/details/83930951
参考文章2：https://blog.csdn.net/qq_39207948/article/details/79532541
参考文章3：https://so.csdn.net/so/search/s.do?q=事件委托&t= &u=
参考文章4：：https://blog.csdn.net/u012881878/article/details/52192700