js中删除事件removeEventListener的使用

最新推荐文章于 2023-09-17 02:26:06 发布

爬楼梯的小新

最新推荐文章于 2023-09-17 02:26:06 发布

阅读量9.1k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_57607714/article/details/122712583

版权

JavaScript 专栏收录该内容

86 篇文章 4 订阅

订阅专栏

案例1: 该点击按钮只允许点击一次弹出对话框

传统方法是使用onclick 然后再点击函数里设置btn按钮为null即可

使用removeEventListener删除事件 fn代表的是调用下面的函数这里调用函数不用加括号删除事件不能写在监听事件里所以把函数放在了外面

<body>
    <button>删除事件1</button>
    <button>删除事件2</button>
    <script>
        //传统方法
        var btn = document.querySelectorAll('button');
        btn[0].onclick = function() {
            alert('删除事件1')
            btn[0].onclick = null;
        }
        //removeEventListener 删除事件
        btn[1].addEventListener('click', fn) //addEventListener监听事件
        function fn() {
            alert('删除事件2');
            btn[1].removeEventListener('click', fn)
        }
    </script>
</body>

相关知识点链接：js中监听注册事件addEventListener的使用