首页 > 其他分享> > 解除事件绑定的方法

解除事件绑定的方法

2021-04-27 18:30:51 作者：互联网

<!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>

标签：function,console,log,绑定,addEventListener,解除,事件,divClick,click
来源： https://blog.csdn.net/qq_45716607/article/details/116207098