JS中两种注册事件的区别

本文链接：https://blog.csdn.net/qq_57193827/article/details/125985779

本文探讨了JavaScript中两种事件处理方式——传统注册事件和事件监听注册。在传统注册中，后注册的事件会覆盖前一个，通过设置为null可解绑事件。而在事件监听注册中，多个事件处理函数会按顺序执行，且匿名函数无法解绑，需要指定函数名来移除监听。详细介绍了这两种方法的执行机制和解绑策略。

摘要由CSDN通过智能技术生成

一、 L0 -- 传统注册事件

1. 同一个对象，后面注册事件会覆盖前面注册的 (同一事件)

2. 直接使用null覆盖就可以实现事件的解绑

3. 都是冒泡阶段执行的

    <button>按钮</button>

    <script>
        let btn = document.querySelector('button')
        btn.onclick = function () {
            alert(1)
        }
        btn.onclick = function () {
            alert(2)
        }
    </script>

进行了覆盖只弹出一次对话框

点击后没有反应 -- 已经解绑成功

二、L2 -- 事件监听注册

1. 同一个对象，后面注册事件不会覆盖前面注册的 (同一事件)

2. 匿名函数无法解绑

3. 可以自定义是否进行冒泡阶段执行

4. 必须使用removeEventListener(事件类型，事件处理函数，获取捕获或者冒泡阶段

1

1

第三个参数： true 捕获

false 冒泡 (默认)

    <button>按钮</button>

    <script>
        let btn = document.querySelector('button')
        btn.addEventListener('click',function () {
            alert(1)
        })
        btn.addEventListener('click',function () {
            alert(2)
        })
    </script>

不会覆盖都会按照顺序进行显示出来

进行解绑不能使用匿名函数!!!!

    <button>按钮</button>

    <script>
        let btn = document.querySelector('button')
        btn.addEventListener('click',test)
        
        function test() {
            alert(1)
        }
        // 解绑
        btn.removeEventListener('click',test)
    </script>

点击失效