首页 > 代码库 > 原生js绑定和解绑事件,兼容IE,FF,chrome

原生js绑定和解绑事件,兼容IE,FF,chrome

   主要是最近项目中用到了原生的js 解绑和绑定 事件  然后今天研究了一下,其实问题不大,不过要注意不要把单词写错了,今天我就找了好久单词写错了。

   需求:当鼠标移上去以后,给Select加载元素,接着解除这个事件。贴上代码,这个是可以运行的,兼容 IE FF chrome 

    

 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>js绑定和解绑事件</title> 5 </head> 6 <body> 7     选择 8     <select id="sel1"> 9         <option>--请选择--</option>10     </select>11 12     <br/>13     <br/>14     <br/>15     <br/>16     <br/>17     <br/>18     <br/>19     <br/>20     选择221     <select id="sel2">22         <option>--请选择--</option>23     </select>24 25 26 27 28 <script type="text/javascript">29 30     var _obj = {};31 32      // 事件绑定33      _obj.bindHandler = (function() {34         return function(obj,type,fn){35             var func = function(){36                 fn.call(obj);     //这里主要是想将obj这个哥们传到我们后期要调用的函数中,所以可以将参数绑定在这个哥们身上37             };38             obj.fnn = func;         //这里主要是为了在解绑的时候取到函数名39             obj.addEventListener ? obj.addEventListener(type,func,false) : obj.attachEvent("on"+type,func); 40         }41        })();42 43        // 事件解除 44       _obj.removeHandler = (function() {45           return function(obj,type,fn){          46             obj.removeEventListener ? obj.removeEventListener(type,fn,false) : obj.detachEvent("on"+type,fn); 47           }48       })();49 50      51      _obj.selEvent=function(){52         var id = this.id;53         //添加option54         for(var j=0;j<5;j++){55             this.options[this.length]=new Option("tl"+j,""+j);56         }57 58         //解除绑定59         _obj.removeHandler(this,mouseover,this.fnn);60 61         //如果 id = sel162         if("sel1"==id){ 63             //移除sel2的绑定64             var sel2 = document.getElementById(sel2);65             _obj.removeHandler(sel2,mouseover,sel2.fnn);66         }67      }68 69     _obj.init=function(){70          //绑定事件71          var sels = document.getElementsByTagName("select");72          for(var i=0;i<sels.length;i++){73             _obj.bindHandler(sels[i],mouseover,_obj.selEvent);74          }75     }76 77     _obj.init();78     79     80 </script>81 82 </body>83 </html>

 

原生js绑定和解绑事件,兼容IE,FF,chrome