两种注册事件的区别

最新推荐文章于 2023-09-13 14:12:44 发布

小番水源

最新推荐文章于 2023-09-13 14:12:44 发布

阅读量214

点赞数

分类专栏： js 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_43368552/article/details/126507643

版权

js 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

传统on注册（L0）

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

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

都是冒泡阶段执行

事件监听注册（L0）

语法：addEventListener（事件类型，事件处理函数，是否使用捕获）

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

可以通过第三参数去确实是冒泡或者捕获阶段执行

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

匿名函数无法被解绑

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击</button>

    <script>
        let btn = document.querySelector('button')

        // // 1. L0   on
        // //多次相同的事件只执行最后一个事件
        // btn.onclick = function () {
        //     alert('第一次')

        // }
        // btn.onclick = function () {
        //     alert('第二次')

        // }
        // // 解除绑定事件
        // btn.onclick = null   //btn就不会再绑定onclick事件，就不会触发alert（），起到了解绑事件的作用 



        // 2. addEventListener
        // 使用addEventListener，相同事件会都执行，都会触发
        btn.addEventListener('click', add)
        function add() {
            alert('第一次')
        }
        // btn.addEventListener('click',function(){
        //     alert('第二次')
        // })

        btn.removeEventListener('click',add)  //解除事件绑定     同时匿名函数无法被解绑，所以需要給函数设置名字
    </script>
</body>

</html>

小番水源

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两种注册事件的区别

必须使用removeEventListener（事件类型，事件处理函数，获取捕获或者冒泡阶段）语法：addEventListener（事件类型，事件处理函数，是否使用捕获）同一个对象，后面注册的事件会覆盖前面注册（同一事件）后面注册的事件不会覆盖前面注册的事件（同一个事件）可以通过第三参数去确实是冒泡或者捕获阶段执行。直接使用null覆盖就可以实现事件的解绑。传统on注册（L0）事件监听注册（L0）...
复制链接

扫一扫

专栏目录