js的冒泡与捕获总结

冒泡事件: 事件会从绑定的元素从里向外层层触发，直到document
捕获事件:事件会从最外层开始触发，直到绑定的元素

冒泡事件

  <div id="c">
    <div id="b">
      <div id="a"></div>
    </div>
  </div>
  <script type="text/javascript">
    document.getElementById('a').addEventListener('click', () => {
      console.log('a')
    })
    document.getElementById('b').addEventListener('click', () => {
      console.log('b')
    })
    document.getElementById('c').addEventListener('click', () => {
      console.log('c')
    })
  </script>

如果点击id为a的div，由于冒泡事件会打印出a,b,c

事件捕获

addEventListener默认的第三个参数是false

document.getElementById('a').addEventListener('click', () => {
  console.log('a')
}, true)
document.getElementById('b').addEventListener('click', () => {
  console.log('b')
}, true)
document.getElementById('c').addEventListener('click', () => {
  console.log('c')
}, true)

如果点击id为a的div，由于冒泡事件会打印出c,b,a

阻止冒泡事件

可以添加stopPropagation()阻止事件传递

  document.getElementById('a').addEventListener('click', e => {
      e.stopPropagation()
      console.log('a')
    })

此时如果点击id为a的div，只会打印出a