解除事件绑定的方法

最新推荐文章于 2024-11-17 23:40:16 发布

原创最新推荐文章于 2024-11-17 23:40:16 发布 · 734 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

69 篇文章

订阅专栏

本文探讨了在JavaScript中如何有效地解除事件绑定，包括使用addEventListener的removeEventListener方法，以及在使用传统事件处理程序时的解除绑定技巧。通过理解这些方法，可以避免内存泄漏和确保代码的健壮性。

<!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 type="text/css">
        div {
            width:100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div id="the-d"></div>
    <script type="text/javascript">
    //解绑定事件的三种方法
    //1  ontType 
    var d=document.querySelector('#the-d'); 

    // d.οnclick=function(){
    //     console.log('我被点击了，clcik');
    //     console.log(this);
    // }

    // d.οnclick=null;


    //2 removeEventListener('type' function)
    // function divClick(){
    //     console.log('我被点击了，click');
    // }

    // function divClick1(){
    //     console.log('我被点击了，click');
    // }

    // function divClick2(){
    //     console.log('我被点击了，click');
    // }

    // d.addEventListener('click',divClick);
    // d.addEventListener('click',divClick1);
    // d.addEventListener('click',divClick2);
   
    // d.removeEventListener('click',divClick);

    //1 removeEventListener 只能删除 addEventListener 加上去
    //2  删除时，必须有函数，如果你不知道函数，Js途径没有办法查询，更无法删除
    //3 作为程序员，怎么能够知道某一个元素挂上了那些事情？
    
    //3 deattachEvent('onType',function)
    function divClick(){
        console.log('被点击了');
    }

    d.attachEvent('onclick',divClick);

    d.detachEvent('onclick',divClick);

    // 练习，按照，addEvent写一个removeEvent，同时要兼容IE和chrome 
    </script>
</body>
</html>