zoukankan      html  css  js  c++  java
  • 原生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     选择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>
  • 相关阅读:
    python初学第一节课
    关于float类型和u32类型问题
    今天的工作状态,规划未来一段时间内必须完成的事情(Record the working status of today,planning for the next period of time must be completed)
    STM32 硬件I2C初始化 I2C1_GPIO_AF_Config
    C语言编程规范--------12 宏
    C语言编程规范--------11 代码测试、维护
    C语言编程规范--------10 代码编辑、编译、审查
    C语言编程规范--------9 质量保证
    C语言编程规范--------8 效率
    C语言编程规范--------7 可测性
  • 原文地址:https://www.cnblogs.com/tlll/p/4084161.html
Copyright © 2011-2022 走看看