js去除事件的方式

传统方式，可以使用onclick = null;新方式，使用removeEventListener

qq_42800468

2928人浏览 · 2022-08-09 17:19:19

qq_42800468 · 2022-08-09 17:19:19 发布

对于传统方式，我们可以使用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>