事件捕获和事件冒泡

事件捕获

事件流由document 向下扩散到目标对象的过程。

事件冒泡

事件流由目标对象向上扩散到document 的过程。

浏览器事件流过程：浏览器先执行事件捕获，再执行事件冒泡。

addEventListener('事件名称',callback,第三个参数)
第三个参数为布尔值，false表示，事件冒泡阶段触发。true，表示事件捕获阶段触发，默认为false

<!DOCTYPE html>
<html lang="en">
<style>
   div{
       width: 100%;
       height: 300px;
       background: red;
   }
   body{
       width: 100%;
       height: 400px;
       background: black;
   }
</style>

<body id="body">
    <div id="div">
         <button id="btn">son</button>
    </div>
</body>

<script>
   const btn = document.querySelector('#btn');
   const div = document.querySelector('#div');
   const body = document.querySelector('#body')
   btn.addEventListener('click',()=>{
       console.log('btn')
   },false)
   div.addEventListener('click',()=>{
       console.log('div')
   })
   
   body.addEventListener('click',()=>{
       console.log('body')
   },true)
   // body  btn  div
</script>

</html>