《JavaScript绑定事件监听函数的通用方法_javascript技巧.docx.pdf》由会员分享，可在线阅读，更多相关《JavaScript绑定事件监听函数的通用方法_javascript技巧.docx.pdf（5页珍藏版）》请在三一文库上搜索。
1、JavaScript绑定事件监听函数的通用方 法 事件绑定的 3 中常用方法：传统绑定、W3C 绑定方法、 IE 绑定方法。但是，在实 际开发小对于我们来讲重要的是需要一个通用的、跨浏览器的绑定方法。如果我 们在互联网上搜索一下会发现许多方法，以下是比较知名的儿种方法： 在开始学期下面儿种方法之前，应当讨论一下，一个好的addEvent ()方法应当达 到哪些要求： a、 支持同一元索的同一事件句柄可以绑定多个监听函数； b、 如果在同一元素的同一事件句柄上多次注册同一函数，那么第一次注册 后的所有注册都被忽略； c函数体内的 this指向的应当是正在处理事件的节点(如当前正在运彳亍事 件句柄
2、的节点 ); d、监听函数的执行顺序应当是按照绑定的顺序执行； c、 在函数体内不用使用event = event | | window, event;来标准化 Event 对象； 一、John Resig 所写的addEvent() 函数 function addEvent( obj, type, fn ) if ( obj. eittachEvent ) obje+type+fn = fn; objtype+fn = function() objf e“+type+fn ( window, event ) ; obj.attachEvent( on+type, objtype+fn); e
3、lse obj.addEvcntListcncr( type, fn, false ); function removeEvent( obj, type, fn ) if ( obj. detachEvent ) obj.detachEvent( on+type, objtype+fn); obj type+fn = null; else obj. removeEventListener( type, fn, false ); 这个函数如此简单易懂，的确非常令人惊讶。那么我们还是要看看上而的五点要 求： 对于第一点满足了； 对于第三点和第五点，肯定也满足了； 对于第二点，并没冇满足，因为add
4、EventListener ()会忽略重复注册，而 attachEvcnt ()则不会忽略； 但是第四点，并没有满足，因为Dom标准没有确定调用一个对象的时间处理 函数的顺序，所以不应该想当然的认为它们以注册的顺序调用。 但是这个函数仍然是一个非常优秀的函数。 二、Dean Edward 所写的 addEvent ()函数 function addEvent (element, type, handler) if (handler. $guid) handler. $guid 二 addEvent. guid+; if (!eleme nt .eve nts) eleme nt .eve nt
5、s 二; var handlers = element. eventstype; if (handlers) handlers = element .eventstype = ; if (element “on“ + type) handlers0二 element “on“ + type; handlershandler. $guid = handler; element on + type 二 handleEvent; addEvent? guid = 1; function removeEvent(element, type, handler) if (element, events f
6、unction handleEvent(event) var returnValue = true; event = event | fixEvent(window.event); var handlers = this? cvcntscvcnt? type; for (var i in handlers) this.$handleEvent 二 handlersi; if (this.$handleEvent(event) = false) returnValue = false; rcturn rcturnValuc; ; function fixEvent(event) event.pr
7、eventDefault 二 fixEvent. preventDefault; event.stopPropagation 二 fixEvent? stopPropagation; rcturn event; ; fixEvent. preventDefault = function() this.returnValue 二 false; ； fixEvent. stopPropagation = function() this.cancelBubble = true; ； 该函数使用了传统的绑定方法，所以它可以在所有的浏览器中工作，也不会造成 内存泄露。 但是对于最初提出的5 点，该函数只
8、是满足了而四点。只有最后一点没有满足， 因为在 JavaScript屮对 for/in语句的执行顺序没冇规定是按照赋值的顺序执 行，尽管大部分时刻是按照预期的顺序执行，因此在不同的JavaScript版本或实 现屮这一语句的顺序有可能不同。 三、Dean Edward的 addEvent ()函数的改进 Array.prototype? indexOf = function( obj ) var resuIt 二 T , length 二 this .length , i=length - 1; for ( ; i二 0 ; i- ) if ( thisi = obj ) resuIt 二 i
9、; break; return result; Array.prototype, contains = function( obj ) feturn ( this? indexOf( obj ) =0 ) Array. prototype? append = function( obj , nodup ) if ( ! (nodup Array, prototype. remove 二 function( obj ) var indcx 二 this, indexOf ( obj ); if ( !indcx ) return ; return this.splice( index , 1);
10、 ; function addEvent(element , type , fun) if (! el erne nt .eve nts) el erne nt .eve nts 二; var hemdlcrs 二 clemcnt. cventstypc; if (handlers) handlers = element, eventstype=; if (element on + type) handlers 0二 element on + ty pe; handlers, append( fun , true) eleme nt on + type二 han dleEve nt; func
11、tion rcmovcEvcnt(clement , type , fun) if (element, events function hemdlcEvent (event) var returnValue = true , i=0; event = event | fixEvent (window, event); var handlers 二 this, eventsevent. type , length 二 handlers. length; for ( ; i length ; i+) if ( hemdlcrsi. call( this , event)二二二false ) ret
12、urnValue = false; return returnValue; function fixEvent(event) event.preventDefault 二 fixEvent. preventDefault; event. stopPropagation 二 fixEvent. stopPropagation; return event; fixEvent. preventDefault = function() this. returnValue = false; ; fixEvent. stopPropagation 二 function() this. cancelBubble = true; ； 该函数是本人对Dean Edward 的 addEvcnt ()函数的改进 完全满足了最初提岀的 5 点要求，希望对大家的学习有所帮助，谢谢大家的阅读。