preventDefault()和stopPropagation()的联系和区别

一、联系

都是event方法，都能阻止事件发生

二、区别

1.preventeDefault()阻止的dom元素默认的事件，如提交的按钮，超链接的跳转等。

2.stopPropagation()阻止的不是事件本身，是事件的传播，通过阻止事件传播阻止JavaScript开发人员的绑定事件

三、代码

1.preventeDefault()

未设置:点击a标签跳转百度

<a href="https://www.baidu.com">点击跳转百度</a>
let a = document.querySelector('a')
a.addEventListener('click',e=>{
  
})

设置后:点击a无反应

let a = document.querySelector('a')
a.addEventListener('click',e=>{
  e.preventDefault()
})

2.stopPropagation()

未设置:点击p后标签打印123和666

let div1 = document.querySelector('div')
div1.addEventListener('click',e=>{
  console.log(666)
})
let ps = document.querySelectorAll('p')
ps.forEach(item=>{
  item.addEventListener('click',e=>{
    console.log(123)
    // e.stopPropagation()
  })
})

设置后:点击p后标签打印123

let div1 = document.querySelector('div')
div1.addEventListener('click',e=>{
  console.log(666)
})
let ps = document.querySelectorAll('p')
ps.forEach(item=>{
  item.addEventListener('click',e=>{
    console.log(123)
    e.stopPropagation()
  })
})