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

浏览数：93 / 时间：2015年06月09日

　　　主要是最近项目中用到了原生的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     选择2
21     <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         //添加option
54         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 = sel1
62         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>