• 原生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>
  • 相关阅读:
    7.3形成团队结构
    第7章 设计构架
    第6章 空中交通管制:高可用性设计案例分析
    5.5安全性战术
    第5章实现质量属性
    4..4.7 使用一般场景进行沟通的概念
    4.4.3性能
    第II部分创建构架
    3.3.2使用结构
    docker容器互联
  • 原文地址:https://www.cnblogs.com/tlll/p/4084161.html
Copyright © 2020-2023  润新知