今天遇到和一个坑关于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>