解绑事件

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34343637/article/details/82222921

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解绑事件</title>
    <style type="text/css"></style>

</head>
<body>
    <input type="button" name="" value="绑定事件" id="btn1">
    <input type="button" name="" value="解除绑定" id="btn2">
    <script type="text/javascript">
        var objBtn1 = document.getElementById("btn1");
        var objBtn2 = document.getElementById("btn2");
/*
    使用onclick进行绑定,也需要使用onclick进行解除。
    原理,将onclick指向一块没有用的空间
       objBtn1.onclick = function(){
           console.log("move it fast!");
        };

       objBtn2.onclick = function(){
        objBtn1.onclick=null;

       };

 */
/*
  使用removeEventListener清除事件
    objBtn1.addEventListener("click",addEvent,false);
    objBtn2.onclick = function(){
          objBtn1.removeEventListener("click",addEvent,false);
    };
    
    

    function addEvent(){
        console.log("make it happend");
    }

 */

//兼容代码

   function addEvent(element,Type,funName){
     if (element.addEventListener) {
          element.addEventListener(Type,funName,false);
     }else if (element.attachEvent) {
         element.attachEvent("on"+Type,funName);
     }else{
         element["on"+Type] = funName;
     }
        
   }

   function removeEvent(element,Type,funName){
     if (element.removeEventListener) {
         element.removeEventListener(Type,funName,false);
     }else if (element.detachEvent){
        element.dettachEvent("on"+Type,funName);
     }else{
         element["on"+Type]=funName;
     }

   }

   function conLog1(){
       console.log("make it move fast ");
   }
  
  function conLog2(){
      console.log("hello world");
  }
  

  addEvent(objBtn1,"click",conLog1);
  addEvent(objBtn1,"click",conLog2);

  objBtn2.onclick = function(){
      removeEvent(objBtn1,"click",conLog1);
  }
 
   

    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_34343637/article/details/82222921
今日推荐