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>

 

posted on 2014-12-26 15:28  VANQUISHER  阅读(392)  评论(0)    收藏  举报

导航