JavaScript绑定事件监听函数的通用方法_javascript技巧

JavaScript绑定事件监听函数的通用方法_javascript技巧

ID:41393949

大小:55.33 KB

页数:5页

时间:2019-08-24

JavaScript绑定事件监听函数的通用方法_javascript技巧_第1页
JavaScript绑定事件监听函数的通用方法_javascript技巧_第2页
JavaScript绑定事件监听函数的通用方法_javascript技巧_第3页
JavaScript绑定事件监听函数的通用方法_javascript技巧_第4页
JavaScript绑定事件监听函数的通用方法_javascript技巧_第5页
资源描述:

《JavaScript绑定事件监听函数的通用方法_javascript技巧》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库

1、JavaScript绑定事件监听函数的通用方法事件绑定的3中常用方法:传统绑定、W3C绑定方法、IE绑定方法。但是,在实际开发小对于我们来讲重要的是需要一个通用的、跨浏览器的绑定方法。如果我们在互联网上搜索一下会发现许多方法,以下是比较知名的儿种方法:在开始学期下面儿种方法之前,应当讨论一下,一个好的addEvent()方法应当达到哪些要求:a、支持同一元索的同一事件句柄可以绑定多个监听函数;b、如果在同一元素的同一事件句柄上多次注册同一函数,那么第一次注册后的所有注册都被忽略;c^函数体内的this指向的应当是正

2、在处理事件的节点(如当前正在运彳亍事件句柄的节点);d、监听函数的执行顺序应当是按照绑定的顺序执行;c、在函数体内不用使用event=event

3、

4、window,event;来标准化Event对象;一、JohnResig所写的addEvent()函数functionaddEvent(obj,type,fn){if(obj.eittachEvent){obj['e'+type+fn]=fn;obj[type+fn]=function(){objfe"+type+fn](window,event);}obj.attac

5、hEvent('on'+type,obj[type+fn]);}elseobj.addEvcntListcncr(type,fn,false);}functionremoveEvent(obj,type,fn){if(obj.detachEvent){obj.detachEvent('on'+type,obj[type+fn]);obj[type+fn]=null;}elseobj.removeEventListener(type,fn,false);这个函数如此简单易懂,的确非常令人惊讶。那么我们还是要看看上而的

6、五点要求:对于第一点满足了;对于第三点和第五点,肯定也满足了;对于第二点,并没冇满足,因为addEventListener()会忽略重复注册,而attachEvcnt()则不会忽略;但是第四点,并没有满足,因为Dom标准没有确定调用一个对象的时间处理函数的顺序,所以不应该想当然的认为它们以注册的顺序调用。但是这个函数仍然是一个非常优秀的函数。二、DeanEdward所写的addEvent()函数functionaddEvent(element,type,handler){if([handler.$$guid)han

7、dler.$$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]二handleE

8、vent;}addEvent・guid=1;functionremoveEvent(element,type,handler){if(element,events&&element.events[type]){deleteelement.events[type][handler・$$guid];}}functionhandleEvent(event){varreturnValue=true;event=event

9、

10、fixEvent(window.event);varhandlers=this・cvcnts[cvc

11、nt・type];for(variinhandlers){this.$$handleEvent二handlers[i];if(this.$$handleEvent(event)===false){returnValue=false;}rcturnrcturnValuc;};functionfixEvent(event){event.preventDefault二fixEvent.preventDefault;event.stopPropagation二fixEvent•stopPropagation;rcturne

12、vent;};fixEvent.preventDefault=function(){this.returnValue二false;};fixEvent.stopPropagation=function(){this.cancelBubble=true;};该函数使用了传统的绑定方法,所以它可以在所有的浏览器中工作,也不会造成内存泄露。但是对于最初提出的5点,

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。