• IE下attachEvent&detachEvent和火狐下addEventListener&removeEventListener//我挖坑又填坑菜鸟思路!!


    今天遇到和一个坑关于IE下 attachEvent和detachEvent/FF下addEventListener&removeEventListener事件的 【菜鸟级】封装的 绑定 和解绑

    1.首先要解决IE下 绑定事件内 this 指向window 的问题 =>这个 很简单 call()完事!
    话不多说,直接上案例

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title>事件绑定&解除</title>
     6     <script>
     7         window.onload=function()
     8         {
     9             var oBtn = document.getElementById('btn1');
    10 
    11             var re = fnAddEvent(oBtn,'click' , aaa);//定义 re变量 接受返回值
    12             var ref = fnAddEvent(oBtn,'click' , bbb);
    13             //fnRemoverEvent(oBtn,'click' , re);
    14             //fnRemoverEvent(oBtn,'click' , ref);
    15         };
    16         function fnRemoverEvent(obj ,sEvent , fn)//事件解绑
    17         {
    18             if(obj.detachEvent)
    19             {
    20 
    21                 obj.detachEvent('on'+sEvent ,fn);
    22             }
    23             else
    24             {
    25                 obj.removeEventListener(sEvent , fn , false);
    26             }
    27 
    28         }
    29 
    30         function fnAddEvent(obj ,sEvent , fn)//事件绑定 函数
    31         {
    32             var fnEvent =fn;//定义一个变量 存储当前 fn 的函数 主要是 为了区别 IE 和FF下 不同返回函数的问题!
    33             if(obj.attachEvent)//利用特性 执行 if
    34             {
    35                  fnEvent = function(arguments)
    36                 {
    37                     fn.call(obj ,arguments);//处理IE下 执行函数内this指向window问题!!
    38                 };
    39 
    40                 obj.attachEvent('on'+sEvent ,fnEvent);
    41             }
    42             else
    43             {
    44                 obj.addEventListener(sEvent , fnEvent , false);
    45             }
    46             return (fnEvent);//返回当前的 存储在 fnEvent里的函数
    47 
    48         }
    49 
    50         //测试 函数
    51         function aaa()
    52         {
    53             alert(this);//=>[object HTMLInputElement]
    54         }
    55         function bbb()
    56         {
    57             alert('bbb');
    58         }
    59 
    60 
    61     </script>
    62 </head>
    63 
    64 <body>
    65 <input type="button" id="btn1" value="按钮">
    66 
    67 </body>
    68 </html>
  • 相关阅读:
    EJB 3.0持久化规范之实体类的要求
    Java正则表达式应用总结
    Java正则表达式教程
    JS正则表达式大全
    Sql Server 配置 及 Hibernate 驱动配置
    EJB QL查询语言
    解决多个jquery文件,造成jquery文件冲突的方法
    ps之网页设计企业站建设推荐
    zencart程序文件目录
    Database server does not support the InnoDB storage engine MAGENTO 安装提示错误
  • 原文地址:https://www.cnblogs.com/VanqusherCsn/p/4186875.html
Copyright © 2020-2023  润新知