js中如何阻止事件冒泡和默认行为

前言

在讲解阻止事件冒泡和默认行为之前，要先理解一个东西叫事件对象，这个事件对象是系统自动给我们创建的，不需要我们去做一些什么额外操作，一般把这个事件对象叫做event对象。

事件对象

这个对象是浏览器通过回调函数作为一个参数传递过来，所以我们可以把这个事件对象当成一个形参来看，里面包含了所有与事件相关的信息，比如说触发事件的元素以及事件的类型

//html
 <div class="box">父元素</div>
 //js
var box=document.querySelector('.box');
box.addEventListener("click",function(e){
  console.log(e)
})

阻止默认行为

<a href="https://www.baidu.com">百度跳转</a>

a标签大家都经常使用，点击百度跳转就会跳转百度网页，这个a标签自带的可以让我们进行跳转（默认行为），但是我们有这样一个需求，我点击这个标签不进行跳转，我们就需要把这个行为去掉，那我们怎么去阻止这个默认行为呢？看代码

      var a=document.querySelector('a');
      a.addEventListener('click',function(e){
      //大部分浏览器
        e.preventDefault()
      //兼容ie678
      e.returnValue=false
      })

这样就可以阻止这个默认行为了，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，目前也不需要考虑兼容性，简单了解一下吧。

事件冒泡

事件冒泡有好处也有坏处，好处就是可以实现一个事件委托，坏处我们看个例子

//html
 <div class="box">
    父元素
    <div class="one">我是子元素</div>
  </div>
  //js
        var one=document.querySelector(".one")
      one.addEventListener("click",function(e){
        alert('我是子元素')
      })
      var box=document.querySelector('.box');
      box.addEventListener("click",function(e){
        alert('我是父元素')
      })

我们会发现当我们点击子元素的时候先会弹出我是子元素的对话框，紧接着会弹出我是父元素的对话框，我们只想点击子元素的时候就弹我是子元素一个对话框，这个时候借助e.stopPropagation(),这样才会只触发子元素的自身逻辑