关于事件监听版本与事件解绑

一、onclick(L0版本)

不可叠加

<script>  
        const btn = document.querySelector('button')
        // L0版本：
        btn.onclick = function() {
            alert(123)
        }
        btn.onclick = function() {
            alert(456)
        }
        //后面把前面覆盖掉 弹出 456
</script>

• 同一个对象，后面注册的事件会覆盖前面注册（同一个事件）

• 直接使用null覆盖就可以实现事件的解释

• <script>
  //绑定事件
  btn.onclick = function(){
      alert('点击了')
  }
  //解绑事件
  btn.onclick = null
  </script>

• 都是冒泡阶段执行的（只有冒泡，没有捕获）

二、addEventListener(L2版本)

可叠加

<script>
        const btn = document.querySelector('button')
        // L2版本：
        btn.addEventListener('click', function () {
            alert(11)
        })
        btn.addEventListener('click', function () {
            alert(22)
        })
        //弹出 11 后 ，再弹出 22
</script>

（既能冒泡也能捕获）

事件解绑语法：removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])

<script>
    const btn = document.querySelector('button')
    function fn(){
        alert('点击了')
    }
    btn.addEventListener('click', fn) //函数要有函数名
    btn.removeEventListener('click', fn)
</script>

• 后面注册的事件不会覆盖前面注册的事件（同一个事件）

• 可以通过第三个参数去确定是在冒泡或者捕获阶段执行（测试）

• 匿名函数无法被解绑（所以函数要有名）