冒泡阶段

  //  事件流->事件完整执行过程中的流动路径

      //  捕获阶段->目标阶段->冒泡阶段

      // 冒泡  触发元素，他自己及其祖先元素都会触发

<div class="box">
      <div class="son">son</div>
    </div>
    <script>
      //  事件流->事件完整执行过程中的流动路径
      //  捕获阶段->目标阶段->冒泡阶段
      // 冒泡  触发元素，他自己及其祖先元素都会触发
      const box = document.querySelector('.box')
      const son = document.querySelector('.son')

      son.addEventListener('click', function () {
        console.log('son')
        alert('son')
      })

      /*  window.addEventListener(
        'click',
        function () {
          console.log('window')
        },
        false
      ) // false表示冒泡阶段
      document.addEventListener('click', function () {
        console.log('document')
      })

      document.documentElement.addEventListener('click', function () {
        console.log('html')
      })

      document.body.addEventListener('click', function () {
        console.log('body')
      }) */

      box.addEventListener('click', function () {
        console.log('box')
        alert('box')
      })