事件冒泡和事件捕获

最近，在复习Vue的时候，发现自己对于事件冒泡和事件捕获的理解存在一定的错误。于是想写一份笔记来总结一下事件冒泡和事件捕获。✌✌✌
在这里插入图片描述

一、事件

1、事件的三个阶段：事件捕获->事件目标->事件冒泡

捕获阶段：先由文档的根节点document往事件触发对象，往外向内捕获事件对象
目标阶段：到达目标事件位置（事发地），触发事件
冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象

当我们点击目标元素之后，不会马上触发目标元素的事件，而是会先执行事件捕获从根元素逐步到目标元素，接着在事件目标阶段，顺序触发目标元素事件，到了冒泡阶段，从目标元素向外到根元素，执行冒泡。

二.例子

<div class="wrap1">    
  <div class="wrap2">      
    <div class="wrap3">        
      <div class="wrap4">        
      </div>      
    </div>    
  </div>  
</div>

wrap1.addEventListener('click',function(e){  console.log("1")})
wrap2.addEventListener("click",function(e){   console.log("2") })
wrap3.addEventListener("click",function(e){    console.log("3") }) 
wrap4.addEventListener("click",function(e){    console.log("4") })

点击warp4，输出4 3 2 1。默认情况是在事件冒泡阶段触发函数的。

都为捕获的情况

wrap1.addEventListener('click',function(e){  console.log("5") },true)     
wrap2.addEventListener("click",function(e){    console.log("6")  },true)      
wrap3.addEventListener("click",function(e){     console.log("7")  },true)     
 wrap4.addEventListener("click",function(e){      console.log("8")  },true)

点击warp4 输出 5 6 7 8

既有冒泡又有捕获的情况

wrap1.addEventListener('click',function(e){console.log("1")})    
wrap2.addEventListener("click",function(e){console.log("6")},true)    
wrap3.addEventListener("click",function(e){console.log("3")})    
wrap3.addEventListener("click",function(e){console.log("7")},true)    
wrap4.addEventListener("click",function(e){console.log("4")})   
wrap4.addEventListener("click",function(e){console.log("8")},true)