删除事件（解绑事件）的方式

最新推荐文章于 2023-12-20 09:22:27 发布

今天星期几呢

最新推荐文章于 2023-12-20 09:22:27 发布

阅读量1.9k

点赞数

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

本文链接：https://blog.csdn.net/shhghvvh/article/details/128033604

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 传统方式删除事件

eventTarget.onclick = null;

// 1. 传统方式删除事件
        divs[0].onclick = function() {
                alert('111');
                divs[0].onclick = null;
            }

2. 方法监听注册方式删除（addEventListener注册的事件删除）

eventTarget.removeEventListener(type, listener[, useCapture])
注意：这里的函数要保存在外部，并且只能写 fn，不能加括号。

// 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) /* 里面的fn 不需要加小括号 */
        function fn() {
            alert("222");
            this.removeEventListener('click', fn);
            // fn.removeEventListener('click', fn); /* 删除自己 */
        }

3. attachEvent注册的事件删除

eventTarget.detachEvent(‘onclick’, fn);

 // 3. 针对IE9以下
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert("333");
            divs[2].detachEvent('onclick', fn1);
        }
    </script>

全部代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        // 1. 传统方式删除事件
        divs[0].onclick = function() {
                alert('111');
                divs[0].onclick = null;
            }
            
        // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) /* 里面的fn 不需要加小括号 */
        function fn() {
            alert("222");
            this.removeEventListener('click', fn);
            // fn.removeEventListener('click', fn); 
        }
        
        // 3. 针对IE9以下
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert("333");
            divs[2].detachEvent('onclick', fn1);
        }
    </script>
</body>

</html>