JavaScript绑定事件监听函数的通用方法
事件绑定的3中常用方法:传统绑定、W3C绑定方法、IE绑定方法。但是,在实际开发中对于我们来讲重要的是需要一个通用的、跨浏览器的绑定方法。如果我们在互联网上搜索一下会发现许多方法,以下是比较知名的几种方法:
在开始学期下面几种方法之前,应当讨论一下,一个好的addEvent()方法应当达到哪些要求:
a、支持同一元素的同一事件句柄可以绑定多个监听函数;
b、如果在同一元素的同一事件句柄上多次注册同一函数,那么第一次注册后的所有注册都被忽略;
c、函数体内的this指向的应当是正在处理事件的节点(如当前正在运行事件句柄的节点);
d、监听函数的执行顺序应当是按照绑定的顺序执行;
e、在函数体内不用使用event=event||window.event;来标准化Event对象;
一、JohnResig所写的addEvent()函数
functionaddEvent(obj,type,fn){ if(obj.attachEvent){ obj['e'+type+fn]=fn; obj[type+fn]=function(){obj['e'+type+fn](window.event);} obj.attachEvent('on'+type,obj[type+fn]); }else obj.addEventListener(type,fn,false); } functionremoveEvent(obj,type,fn){ if(obj.detachEvent){ obj.detachEvent('on'+type,obj[type+fn]); obj[type+fn]=null; }else obj.removeEventListener(type,fn,false); }
这个函数如此简单易懂,的确非常令人惊讶。那么我们还是要看看上面的五点要求:
对于第一点满足了;
对于第三点和第五点,肯定也满足了;
对于第二点,并没有满足,因为addEventListener()会忽略重复注册,而attachEvent()则不会忽略;
但是第四点,并没有满足,因为Dom标准没有确定调用一个对象的时间处理函数的顺序,所以不应该想当然的认为它们以注册的顺序调用。
但是这个函数仍然是一个非常优秀的函数。
二、DeanEdward所写的addEvent()函数
functionaddEvent(element,type,handler){ if(!handler.$$guid)handler.$$guid=addEvent.guid++; if(!element.events)element.events={}; varhandlers=element.events[type]; if(!handlers){ handlers=element.events[type]={}; if(element["on"+type]){ handlers[0]=element["on"+type]; } } handlers[handler.$$guid]=handler; element["on"+type]=handleEvent; } addEvent.guid=1; functionremoveEvent(element,type,handler){ if(element.events&&element.events[type]){ deleteelement.events[type][handler.$$guid]; } } functionhandleEvent(event){ varreturnValue=true; event=event||fixEvent(window.event); varhandlers=this.events[event.type]; for(variinhandlers){ this.$$handleEvent=handlers[i]; if(this.$$handleEvent(event)===false){ returnValue=false; } } returnreturnValue; }; functionfixEvent(event){ event.preventDefault=fixEvent.preventDefault; event.stopPropagation=fixEvent.stopPropagation; returnevent; }; fixEvent.preventDefault=function(){ this.returnValue=false; }; fixEvent.stopPropagation=function(){ this.cancelBubble=true; };
该函数使用了传统的绑定方法,所以它可以在所有的浏览器中工作,也不会造成内存泄露。
但是对于最初提出的5点,该函数只是满足了前四点。只有最后一点没有满足,因为在JavaScript中对for/in语句的执行顺序没有规定是按照赋值的顺序执行,尽管大部分时刻是按照预期的顺序执行,因此在不同的JavaScript版本或实现中这一语句的顺序有可能不同。
三、DeanEdward的addEvent()函数的改进
Array.prototype.indexOf=function(obj){ varresult=-1,length=this.length,i=length-1; for(;i>=0;i--){ if(this[i]==obj){ result=i; break; } } returnresult; } Array.prototype.contains=function(obj){ return(this.indexOf(obj)>=0) } Array.prototype.append=function(obj,nodup){ if(!(nodup&&this.contains(obj))){ this[this.length]=obj; } } Array.prototype.remove=function(obj){ varindex=this.indexOf(obj); if(!index)return; returnthis.splice(index,1); }; functionaddEvent(element,type,fun){ if(!element.events)element.events={}; varhandlers=element.events[type]; if(!handlers){ handlers=element.events[type]=[]; if(element['on'+type]){ handlers[0]=element['on'+type]; } } handlers.append(fun,true) element['on'+type]=handleEvent; } functionremoveEvent(element,type,fun){ if(element.events&&element.events[type]){ element.events[type].remove(fun); } } functionhandleEvent(event){ varreturnValue=true,i=0; event=event||fixEvent(window.event); varhandlers=this.events[event.type],length=handlers.length; for(;i<length;i++){ if(handlers[i].call(this,event)===false){ returnValue=false; } } returnreturnValue; } functionfixEvent(event){ event.preventDefault=fixEvent.preventDefault; event.stopPropagation=fixEvent.stopPropagation; returnevent; } fixEvent.preventDefault=function(){ this.returnValue=false; }; fixEvent.stopPropagation=function(){ this.cancelBubble=true; };
该函数是本人对DeanEdward的addEvent()函数的改进,完全满足了最初提出的5点要求,希望对大家的学习有所帮助,谢谢大家的阅读。