js去除事件的方式

最新推荐文章于 2024-05-15 22:16:44 发布

人人黑眼圈

最新推荐文章于 2024-05-15 22:16:44 发布

阅读量2.8k

点赞数

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

本文链接：https://blog.csdn.net/qq_42800468/article/details/126251872

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

对于传统方式，我们可以使用onclick = null;
新方式，使用removeEventListener
注：使用removeEventListener时参数必须和addEventListener相同，因此使用匿名函数作为回调函数时，删除事件是不生效的。

<body>
    <div id="id1">
        点击我
    </div>

    <div id="id2" style="margin-top: 50px;">
        点击我2
    </div>

    <script>
        let div1 = document.querySelector('#id1');
        let div2 = document.querySelector('#id2');
        // 传统方式
        div1.onclick = function () {
            alert('我只能出现一次');
            div1.onclick = null;    // 删除事件
        }

        // 新方式
        div2.addEventListener('click', fn);
        function fn () {
            alert('我也只能出现一次');
            div2.removeEventListener('click', fn);      //去除事件
        }
    </script>
</body>