阻止事件冒泡和解除事件绑定

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

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

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

      const box = document.querySelector('.box')

      const son = document.querySelector('.son')

      son.addEventListener('click', function (e) {

        e.stopPropagation() //

        console.log('son')

        alert('son')

      })

      box.addEventListener('click', function () {

        console.log('box')

        alert('box')

      })

​
 <button>dom0级事件</button>
    <button>dom2级事件</button>
    <script>
      const btn = document.querySelectorAll('button')
      btn[0].onclick = function () {
        alert('dom0')
        btn.onclick = null
      }

      function f() {
        alert('dom2')
        // 解除事件绑定
        btn[1].removeEventListener('click', f)
      }
      btn[1].addEventListener('click', f)

​