事件冒泡与捕获 阻止事件冒泡

冒泡

    <style>
        div{
            width: 150px;
          height: 150px;
          background-color: blue
        }
        .pp{
          width: 100px;
          height: 100px;
            background-color: red;    
        }
    </style>
   <div>
        <p class="pp"></p>
   </div>
   <script>
    let div=document.querySelector('div')
    let p=document.querySelector('p')
    div.addEventListener('click',function(e){
        console.log(e.target.tagName)
    })
    p.addEventListener('click',function(e){
        console.log(e.target.tagName)
    })
	</script>

当点击p标签即红色区域时，会先触发p标签的点击事件输出P，再触发div标签的点击事件输出DIV，这种从内到外一次触发相应事件，称为事件冒泡

捕获

与冒泡相反，从外到内一次触发相应事件称为捕获
addEventListener(event,function,useCaptrue)有三个参数
只需将第三个参数写为true即可在捕获阶段触发
event： 必须。字符串，指定事件名。
注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”
__function：__必须。指定要事件触发时执行的函数。
当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。
useCaptrue： 布尔值 指定事件在冒泡阶段还是捕获阶段触发。默认false为冒泡阶段触发

阻止事件冒泡

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true
比如在上面的例子中，在p标签的点击事件函数中加上e.stopPropagation()，再点击p标签时，只会触发p标签的点击事件，而不会向上冒泡触发外面的div的点击事件了。
例：

    <style>
        div{
            width: 150px;
          height: 150px;
          background-color: blue
        }
        .pp{
          width: 100px;
          height: 100px;
            background-color: red;    
        }
    </style>
   <div>
        <p class="pp"></p>
   </div>
   <script>
    let div=document.querySelector('div')
    let p=document.querySelector('p')
    div.addEventListener('click',function(e){
        console.log(e.target.tagName)
    })
    p.addEventListener('click',function(e){
    e.stopPropagation() //阻止冒泡，这样你点击p标签，外面的div标签的点击事件就不会触发了
        console.log(e.target.tagName)
    })
	</script>