首页 > 代码库 > 事件封装（多个函数绑定一个事件，估计这样解释不对）

事件封装（多个函数绑定一个事件，估计这样解释不对）

2024-07-04 16:05:36   230人阅读

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <!--<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />-->
    <title></title>
    <style type="text/css">
        .red{width:100px;height:100px;background:red;}
        .blue{width:100px;height:100px;background:blue;}
    </style>
    <script type="text/javascript">
   /*window.onload=function(){
       alert("Lee");
   }
        if(typeof window.onload=="function"){
            var saved=null;
            saved=window.onload;
        }
        window.onload=function(){
        if(saved){
            saved();
        }
         alert("Mr.Lee");
}*/
   //传统绑定机制
/*   window.onload=function(){
         var box=document.getElementById("box");


            box.onclick=function() {
                alert("Lee");
                toRed().call(this);
            }
        }
        function toRed(){
           // alert(this)
            this.className="red";
            this.onclick=toBlue;
        }
        function toBlue(){
            this.className="blue";
            this.onclick=toRed;
        }


*/
   /* window["onload"]=function(){
    alert("Lee");
    }*/
    /* function addEvent(obj,type,fn) {
         var saved = null;
         if (typeof obj[‘on‘ + type] == "function") {
             saved = obj[‘on‘ + type];//保存上一个事件
         }
         //执行事件
         obj[‘on‘ + type] = function () {
             if(saved)saved();//先执行上一个事件
             fn();
         }
     }
       addEvent(window,"load",function(){
       alert("Lee");
   })
   addEvent(window,"load",function(){
       alert("Leesss");
   })*/

*****************风格线*********这里才是本章高潮处*******************************************************************


    //当不断点击的时候，浏览器就会卡死，并且报错：too muchrecursion，太多的递归
    //因为积累了太多保存的事件
    //解决方案，就是用完事件就立即清除
   //移除事件
   function removeEvent(obj,type){
       if(obj["on"+type]) obj["on"+type]=null;
   }
   //添加事件
   function addEvent(obj,type,fn) {
       var saved = null;
       if (typeof obj[‘on‘ + type] == "function") {
           saved = obj[‘on‘ + type];//保存上一个事件
       }
       //执行事件
       obj[‘on‘ + type] = function () {
           if(saved)saved.call(this);//先执行上一个事件
           fn.call(this);//这两个地方要加个call呢 不然一会this就指向window了
       }
   }


   addEvent(window,‘load‘,function(){
       var box=document.getElementById("box");
      addEvent(box,‘click‘,toRed); //this 没有传递过去
   })
  function toRed(){
       this.className="red";
      removeEvent(this,‘click‘);//移除事件函数
       addEvent(this,‘click‘,toBlue);//添加事件函数
   }
   function toBlue(){
       this.className="blue";
       removeEvent(this,‘click‘);//移除事件函数
       addEvent(this,‘click‘,toRed);//添加事件函数
   }




    </script>
</head>
<body>
<div id="box" class="blue">测算点</div>
</body>

</html>


联系
我们