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

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

　　

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

 <title>js绑定和解绑事件</title>

 </head>

 <body>

     选择

     <select id="sel1">

         <option>--请选择--</option>

     </select>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     <br/>

     选择2

     <select id="sel2">

         <option>--请选择--</option>

     </select>

 <script type="text/javascript">

     var _obj = {};

      // 事件绑定

      _obj.bindHandler = (function() {

         return function(obj,type,fn){

             var func = function(){

                 fn.call(obj);     //这里主要是想将obj这个哥们传到我们后期要调用的函数中,所以可以将参数绑定在这个哥们身上

             };

             obj.fnn = func;         //这里主要是为了在解绑的时候取到函数名

             obj.addEventListener ? obj.addEventListener(type,func,false) : obj.attachEvent("on"+type,func);

         }

        })();

        // 事件解除

       _obj.removeHandler = (function() {

           return function(obj,type,fn){

             obj.removeEventListener ? obj.removeEventListener(type,fn,false) : obj.detachEvent("on"+type,fn);

           }

       })();

      _obj.selEvent=function(){

         var id = this.id;

         //添加option

         for(var j=0;j<5;j++){

             this.options[this.length]=new Option("tl"+j,"值"+j);

         }

         //解除绑定

         _obj.removeHandler(this,'mouseover',this.fnn);

         //如果 id = sel1

         if("sel1"==id){

             //移除sel2的绑定

             var sel2 = document.getElementById('sel2');

             _obj.removeHandler(sel2,'mouseover',sel2.fnn);

         }

      }

     _obj.init=function(){

          //绑定事件

          var sels = document.getElementsByTagName("select");

          for(var i=0;i<sels.length;i++){

             _obj.bindHandler(sels[i],'mouseover',_obj.selEvent);

          }

     }

     _obj.init();

 </script>

 </body>

 </html>

原生js绑定和解绑事件,兼容IE,FF,chrome的更多相关文章

  1. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  2. bind,unbing,on,live,delegate绑定和解绑事件

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/T ...

  3. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  4. python全栈开发day49-jquery的位置信息、事件流、事件对象，事件委托，事件绑定和解绑

    一.昨日内容回顾    1. jQuery的属性操作 1) html属性操作:attr 2) DOM属性操作:prop 3) 类样式操作:addClass.removeClass.toggleClas ...

  5. jquery-10 jquery中的绑定事件和解绑事件的方法是什么

    jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...

  6. 11-jQuery的事件绑定和解绑

    1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (String) : 事件类型 data ( ...

  7. 前端 -----jQuery的事件绑定和解绑

    11-jQuery的事件绑定和解绑   1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (S ...

  8. jQuery绑定和解绑点击事件及重复绑定解决办法

    原文地址:http://www.111cn.net/wy/jquery/47597.htm 绑点击事件这个是jquery一个常用的功能,如click,unbind等等这些事件绑定事情,但还有很多朋友不 ...

  9. jQuery的事件绑定和解绑

    1.绑定事件 $('获取的标签对象').bind('要操作的方法,  {操作的内容  是字典的形式},function(){} ') 语法: bind(type,data,fn) 描述:为每一个匹配元 ...

随机推荐

  1. zabbix灵活使用userparameters

    userparameters介绍 官网文献:https://www.zabbix.com/documentation/2.0/manual/config/items/userparameters 当我 ...

  2. zabbix部署

    zabbix部署 ----2016年年终总结 二 服务器端安装   yum install zabbix-server 客户端安装 yum install zabbix-agent 配置Server ...

  3. Opencv如何捕获摄像头视频-OpenCV步步精深

    捕获摄像头实时图像 这一点非常非常重要,因为这一点关乎了以后我们进行各种各样的识别(人脸识别,车牌识别等等有趣的识别).opencv提供了一个接口,可以轻松的让我们实现这个功能.我们先来看一段代码,根 ...

  4. 转载：WPF MVVM之INotifyPropertyChanged接口的几种实现方式

    原文地址:http://www.cnblogs.com/xiwang/ 序言 借助WPF/Sliverlight强大的数据绑定功能,可以比实现比MFC,WinForm更加优雅轻松的数据绑定.但是在使用 ...

  5. 设计模式之visitor模式,人人能懂的有趣实例

    设计模式,现在在网上随便搜都一大堆,为什么我还要写"设计模式"的章节呢? 两个原因: 1.本人觉得这是一个有趣的设计模式使用实例,所以记下来: 2.看着设计模式很牛逼,却不知道怎么 ...

  6. JS对象深度克隆

    首先看一个例子: var student = { name:"yxz", age:25 } var newStudent = student; newStudent.sex = & ...

  7. bootstrap学习之利用CSS属性pointer-events禁用表单控件

    参考链接: CSS3 pointer-events:none应用举例及扩展 首先pointer-events在除去SVG中的应用只有两个值:AUTO | NONE pointer-events:non ...

  8. 南天PR2、PR2E驱动下载，xp，win7，win8，win8.1，win10 32位64位驱动下载安装教程

    家里开淘宝店,有个针式打印机驱动.电脑各种换系统,为了装这个驱动可是废了不小的劲.不敢独享,所以现在把各种驱动以及安装教程分享出来. 注意: 打印机在开机状态下,电脑在开机状态下,不要插拔连接线!!! ...

  9. C 指针的几个注意点

    1.静态指针在初始化时必须使用编译时可以确定地址表达式完成赋值,如 static int a; static int* pa = &a;//初始化时必须使用可以确定地址的表达式 int b; ...

  10. 添加 hexo yilia 主题的文章阅读量

    根据此篇博客(点击查看) 配置出自己的博客阅读量,里面介绍了如何配置开通 leancloud 应用 当然介绍我如何配置 yilia 显示自己的浏览量的. 首先在 yilia 主题下修改 _config ...