DOM事件流-----捕获与冒泡

捕获与冒泡是什么

DOM事件流（event flow ）存在三个阶段：
事件捕获阶段、
处于目标阶段、
事件冒泡阶段。

事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。
**
事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。
无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是事件传播。

dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡

另外IE10及以下不支持捕获事件，IE11、Chrome 、Firefox、Safari等浏览器则同时存在。

监听函数addEventListener(event, listener, useCapture)

addEventListener(event, listener, useCapture）　
这个函数可以监听到dom事件捕获阶段和冒泡阶段
此函数需要传三个参数
event: 事件名
listener：函数
useCapture：这个参数默认为false,监听冒泡事件传播，为ture时监听捕获

我们来用这个方法做个例子来详细解释一下捕获与冒泡具体表现差异

这是两个父子关系的div，并分别为这两个div和body都绑定了点击事件：

 <script type="text/javascript">
         var parent = document.getElementById("parent");       
          var child = document.getElementById("child");
          
        document.body.addEventListener('click',function(e){           
         console.log('click--body')        })
         
        parent.addEventListener('click',function (e) {           
         console.log("click-parent");        })
         
        child.addEventListener('click',function (e) {            
        console.log("click-child");        })        
       

        </script>

通过"addEventListener"方法，采用事件冒泡方式给dom元素注册click事件，点击子元素会发生什么呢？如下图所示：
如果点击子元素不想触发父元素的事件怎么办？肯定可以的，那就是停止事件传播—event.stopPropagation()
如果点击子元素不想触发父元素的事件怎么办？那就是停止事件传播—event.stopPropagation()，在我们刚才写的代码中加入此方法：

child.addEventListener('click',function (e) {            
	console.log("click-child");            
	e.stopPropagation() 
 })

当我们点击子元素：

可以看到我们成功的阻止了冒泡行为

接下来我们用"addEventListener"方法同时监听一下捕获阶段和冒泡阶段，

 <script type="text/javascript">       
  var parent = document.getElementById("parent");       
   var child = document.getElementById("child");
   
   	document.body.addEventListener('click',function(e){            
         console.log('捕获-body')        },true)        
         
         parent.addEventListener('click',function(e){            
         cnsole.log('捕获-parent')        },true)       
         
         child.addEventListener('click',function(e){           
           console.log('捕获-child')        },true)    
      
        document.body.addEventListener('click',function(e){           
         console.log('click--body')       })
         
        parent.addEventListener('click',function (e) {           
         console.log("click-parent");             })
         
        child.addEventListener('click',function (e) {           
         console.log("click-child");               })        
         
              
           </script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191104090854421.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhbjEzNDcxOTYzODY=,size_16,color_FFFFFF,t_70)

可以看到当我们点击到子元素，先输出的是捕获，再输出的是冒泡阶段的代码，