event.js

//==========================================
//  事件模块（包括伪事件对象，事件绑定与事件代理）
//==========================================
$.define("event",document.dispatchEvent ?  "node" : "node,event_fix",function(){// $.log("已加载target模块")var rhoverHack = /(?:^|\s)hover(\.\S+)?\b/,  rmapper = /(\w+)_(\w+)/g,rtypenamespace = /^([^\.]*)?(?:\.(.+))?$/, revent = /(^|_|:)([a-z])/gfunction addCallback(queue, obj){//添加回调包到列队中var check = true, fn = obj.callback;for ( var i = 0, el; el = queue[i++]; ) {if( el.callback === fn ){check = false;break;}}if( check ){queue.push(obj);}}function quickIs( elem, m ) {var attrs = elem.attributes || {};return ((!m[1] || elem.nodeName.toLowerCase() === m[1]) &&(!m[2] || (attrs.id || {}).value === m[2]) &&(!m[3] || m[3].test( (attrs[ "class" ] || {}).value )));}//如果不存在添加一个var facade = $.event = $.event || {};//添加或增强二级属性eventAdapter$.Object.merge(facade,{eventAdapter:{focus: {delegateType: "focusin"},blur: {delegateType: "focusout"},beforeunload: {setup: function(src, _, _, fn ) {// We only want to do this special case on windowsif ( $.type(src, "Window") ) {src.onbeforeunload = fn;}},teardown: function( src, _, _, fn ) {if ( src.onbeforeunload === fn ) {src.onbeforeunload = null;}}}}});var eventAdapter  = $.event.eventAdapter;$.mix(facade,{bind : function( hash ){//它将在原生事件派发器或任何能成为事件派发器的普通JS对象添加一个名叫uniqueNumber的属性,用于关联一个缓存体,//把需要的数据储存到里面,而现在我们就把一个叫events的对象储放都它里面,//而这个event的表将用来放置各种事件类型与对应的回调函数if(arguments.length > 1 ){throw "$.event bind method only need one argument, and it's a hash!"}var target = this, DOM =  $[ "@target" ] in target, events = $._data( target),types = hash.type, fn = hash.callback,selector = hash.selector, callback;if(target.nodeType === 3 || target.nodeType === 8 || !events){return}hash.uuid =  $.getUid(fn); //确保UUID，bag与callback的UUID一致if( DOM ){ //处理DOM事件callback = events.callback ||  (events.callback = function( e ) {return ((e || event).type !== facade.fireType ) ? facade.dispatch.apply( callback.target, arguments ) : void 0;});callback.target = target;types = types.replace( rhoverHack, "mouseover$1 mouseout$1" )}events = events.events || (events.events = {});//对多个事件进行绑定types.replace( $.rword, function( old ){vartns = rtypenamespace.exec( old ) || [],//"focusin.aaa.bbb"namespace = ( tns[2] || "" ).split( "." ).sort(),//取得命名空间 "aaa.bbb"adapter = DOM && eventAdapter[ tns[1] ] || {},// focusin -> focustype = (selector ? adapter.delegateType : adapter.bindType ) || tns[1],//focusqueue = events[ type ] = events[ type ] ||  [],  //创建事件队列item = $.mix({type: type,origType: tns[1],namespace: namespace.join(".")}, hash, false);//只有原生事件发送器才能进行DOM level2 多投事件绑定if( DOM && !queue.length  ){adapter = eventAdapter[ type ] || {};if (!adapter.setup || adapter.setup( target, selector, item.origType, callback ) === false ) {// 为此元素这种事件类型绑定一个全局的回调，用户的回调则在此回调中执行$.bind(target, type, callback, !!selector)}}addCallback( queue, item );//同一事件不能绑定重复回调});return this;},//外部的API已经确保typesr至少为空字符串unbind: function( hash, mappedTypes  ) {var target = this, events = $._data( target, "events");if(!events ) return;var types = hash.type || "", selector = hash.selector, fn = hash.callback,tns, type, origType, namespace, origCount, DOM =  $["@target"] in target,j, adapter, queue, item;//将types进行映射并转换为数组types = DOM ? types.replace( rhoverHack, "mouseover$1 mouseout$1" ) : types;types =  types.match( $.rword ) || [];for (var t = 0; t < types.length; t++ ) {//"aaa.bbb.ccc" -> ["aaa.bbb.ccc", "aaa", "bbb.ccc"]tns = rtypenamespace.exec( types[t] ) || []origType = type = tns[1];namespace = tns[2];// 如果types只包含命名空间，则去掉所有拥有此命名空间的事件类型的回调if ( !type  ) {for ( j in events ) {facade.unbind.call( target, {type: j + types[t],//说明这个types[t]为命名空间selector: selector,callback: fn}, true );}continue;}//如果使用事件冒充则找到其正确事件类型adapter = eventAdapter[ type ] || {};type = ( selector ? adapter.delegateType: adapter.bindType ) || type;queue =  events[ type ] || [];origCount = queue.length;namespace = namespace ? new RegExp("(^|\\.)" + namespace.split(".").sort().join("\\.(?:.*\\.)?") + "(\\.|$)") : null;//  namespace =  namespace?  namespace.split( "." ).sort().join(".") : null;//只有指定了命名空间，回调或选择器才能进入此分支if ( fn || namespace || selector ) {for ( j = 0; j < queue.length; j++ ) {item = queue[ j ];if ( ( mappedTypes || origType === item.origType ) &&( !fn || fn.uuid === item.uuid ) &&//如果指定了回调，只检测其UUID( !namespace || namespace.test( item.namespace ) ) &&//如果指定了命名空间( !selector || selector === item.selector || selector === "**" && item.selector ) ) {queue.splice( j--, 1 );}}} else {//移除此类事件的所有回调queue.length = 0;}if ( DOM && (queue.length === 0 && origCount !== queue.length) ) {//如果在回调队列的长度发生变化时才进行此分支if ( !adapter.teardown || adapter.teardown( target, selector, origType, fn ) === false ) {$.unbind( target, type, $._data( target, "callback") );}delete events[ type ];}}if( $.isEmptyObject( events ) ){fn = $.removeData( target,"callback") ;fn.target = null;$.removeData( target, "events") ;}return this;},fire: function( event ){//event的类型可能是字符串,原生事件对象,伪事件对象var target = this, namespace = [], type = event.type || event;if(!isFinite(event.mass)){event = new jEvent(event);if( ~type.indexOf( "." ) ) {//处理命名空间namespace = type.split(".");type = namespace.shift();namespace.sort();event.namespace = namespace.join( "." );event.namespace_re = event.namespace ? new RegExp("(^|\\.)" + namespace.join("\\.(?:.*\\.)?") + "(\\.|$)") : null;}event.target = target;}var args = [ event ].concat( $.slice(arguments,1) );if( $["@target"] in target){var cur = target,  ontype = "on" + type;do{//模拟事件冒泡与执行内联事件if( ($._data(cur,"events")|| {})[type] ){facade.dispatch.apply( cur, args );}if (cur[ ontype ] && cur[ ontype ].call(cur) === false) {event.preventDefault();}cur = cur.parentNode ||cur.ownerDocument ||cur === target.ownerDocument && window;} while ( cur && !event.isPropagationStopped );if ( !event.isDefaultPrevented ) {//模拟默认行为 click() submit() reset() focus() blur()var old;//在opera 中节点与window都有document属性if (ontype && target[ type ] && ((type !== "focus" && type !== "blur") || target.offsetWidth !== 0) && !target.eval) {old = target[ ontype ];if (old) {   // 不用再触发内联事件target[ ontype ] = null;}facade.fireType = type;target[ type ]();}delete facade.fireType ;if ( old ) {target[ ontype ] = old;}}}else{//普通对象的自定义事件facade.dispatch.apply(target, args);}return this;},filter: function( cur, parent, expr ){var matcher = typeof expr === "function"? expr : expr.input ? quickIs : $.matchfor ( ; cur != parent; cur = cur.parentNode || parent ) {if(matcher(cur, expr))return true}return false;},dispatch: function( e ) {var win = ( this.ownerDocument || this.document || this ).parentWindow || window,event = facade.fix( e || win.event ),queue = $._data(this,"events");//这个其实是对象eventsif (  queue ) {queue = queue[ event.type] || [];//到此处时才是数组event.currentTarget = this;var src = event.target,args = [event].concat($.slice(arguments,1)), result;//复制数组以防影响下一次的操作queue = queue.concat();//开始进行拆包操作for ( var i = 0, item; item = queue[i++]; ) {//如果是事件代理，确保元素处于enabled状态，并且满足过滤条件if ( !src.disabled && !(event.button && event.type === "click")&& (!item.selector  || facade.filter(src, this, item.selector))&& (!event.namespace || event.namespace_re.test( item.namespace ) ) ) {//取得回调函数event.type = item.origType;result = item.callback.apply( item.selector ? src : this, args );item.times--;if(item.times === 0){facade.unbind.call( this, item)}if ( result !== void 0 ) {event.result = result;if ( result === false ) {event.preventDefault();event.stopPropagation();}}if ( event.isImmediatePropagationStopped ) {break;}}}}return event.result;},_dispatch: function( src, type, e ){e = facade.fix( e );e.type = type;for(var i in src){if(src.hasOwnProperty(i)){facade.dispatch.call( src[ i ], e );}}},fix: function( event ){if( !isFinite(event.mass) ){var originalEvent = eventevent = new jEvent(originalEvent);for( var prop in originalEvent ){//去掉所有方法与常量if( typeof originalEvent[prop] !== "function" && prop !== "type" ){if(/^[A-Z_]+$/.test(prop))continueevent[prop] = originalEvent[prop]}}//如果不存在target属性，为它添加一个if ( !event.target ) {event.target = event.srcElement || document;}//safari的事件源对象可能为文本节点，应代入其父节点if ( event.target.nodeType === 3 ) {event.target = event.target.parentNode;}// 处理鼠标事件if( /^(?:mouse|contextmenu)|click/.test(event.type) ){//如果不存在pageX/Y则结合clientX/Y做一双出来if ( event.pageX == null && event.clientX != null ) {var doc = event.target.ownerDocument || document,html = doc.documentElement, body = doc.body;event.pageX = event.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html && html.clientLeft || body && body.clientLeft || 0);event.pageY = event.clientY + (html && html.scrollTop  || body && body.scrollTop  || 0) - (html && html.clientTop  || body && body.clientTop  || 0);}//如果不存在relatedTarget属性，为它添加一个if ( !event.relatedTarget && event.fromElement ) {event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;}//标准浏览判定按下鼠标哪个键，左1中2右3var button = event.button//IE event.button的意义//0：没有键被按下 1：按下左键 2：按下右键 3：左键与右键同时被按下 4：按下中键 5：左键与中键同时被按下 6：中键与右键同时被按下 7：三个键同时被按下if ( !event.which && isFinite(button) ) {event.which  = [0,1,3,0,2,0,0,0][button];//0现在代表没有意义}}if ( event.which == null ) {//处理键盘事件event.which = event.charCode != null ? event.charCode : event.keyCode;}if( window.Touch && event.touches && event.touches[0] ){$.log("fix touch pageXY")event.pageX = event.touches[0].pageXevent.pageY = event.touches[0].pageY}//处理滚轮事件if( event.type === "mousewheel" ){if ("wheelDelta" in originalEvent){var delta = originalEvent.wheelDelta/120;//opera 9x系列的滚动方向与IE保持一致，10后修正if(top.opera && opera.version() < 10)delta = -delta;event.wheelDelta = Math.round(delta); //修正safari的浮点 bug}else if("detail" in originalEvent){event.wheelDelta = -event.detail/3;}}// 处理组合键if ( event.metaKey === void 0 ) {event.metaKey = event.ctrlKey;}}return event;}});var jEvent = $.Event = function ( event ) {this.originalEvent = event.type ? event: {};this.type = (event.type || event).replace(/\..*/g,"");this.timeStamp  = Date.now();this.mass = $.mass;//用于判定是否为伪事件对象};// http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.htmljEvent.prototype = {constructor: jEvent,//http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/events.html#ConformancetoString: function(){return "[object Event]"},preventDefault: function() {this.isDefaultPrevented = true;var e = this.originalEvent;// 如果存在preventDefault 那么就调用它if ( e.preventDefault ) {e.preventDefault();}// 如果存在returnValue 那么就将它设为falsee.returnValue = false;return this;},stopPropagation: function() {this.isPropagationStopped = true;var e = this.originalEvent;// 如果存在preventDefault 那么就调用它if ( e.stopPropagation ) {e.stopPropagation();}// 如果存在returnValue 那么就将它设为truee.cancelBubble = true;return this;},stopImmediatePropagation: function() {this.isImmediatePropagationStopped = true;this.stopPropagation();return this;}};var types = "contextmenu,click,dblclick,mouseout,mouseover,mouseenter,mouseleave,mousemove,mousedown,mouseup,mousewheel," +"abort,error,load,unload,resize,scroll,change,input,select,reset,submit,input,"+"blur,focus,focusin,focusout,"+"keypress,keydown,keyup"//事件派发器的接口//实现了这些接口的对象将具有注册事件和广播事件的功能//http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget$.EventTarget = {uniqueNumber : $.getUid({}),defineEvents : function( names ){var events = [];if(typeof names == "string"){events = names.match( $.rword ) || [];}else if($.isArray(names)){events = names;}events.forEach(function(name){var method = 'on'+name.replace(revent,function($, $1, $2) {return $2.toUpperCase();});if (!(method in this)) {this[method] = function() {return $.fn.on.apply(this, [].concat.apply([name], arguments));};}},this);}};"bind_on,unbind_off,fire_fire".replace( rmapper,function(_, type, mapper){$.EventTarget[ type ] = function(){$.fn[ mapper ].apply(this, arguments);return this;}});$.eventSupport = function( eventName,el ) {el = el || document.createElement("div");eventName = "on" + eventName;var ret = eventName in el;if ( el.setAttribute && !ret ) {el.setAttribute( eventName, "" );ret = typeof el[ eventName ] === "function";el.removeAttribute(eventName);}el = null;return ret;};/**
用于在标准浏览器下模拟mouseenter与mouseleave
现在除了IE系列支持mouseenter/mouseleave/focusin/focusout外
opera11,FF10也支持这四个事件,同时它们也成为w3c DOM3 Event的规范
详见http://www.filehippo.com/pl/download_opera/changelog/9476/
http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html*/if( !+"\v1" || !$.eventSupport("mouseenter")){"mouseenter_mouseover,mouseleave_mouseout".replace(rmapper, function(_, type, mapper){eventAdapter[ type ]  = {setup: function( src ){//使用事件冒充$._data( src, type+"_handle", $.bind( src, mapper, function( e ){var parent = e.relatedTarget;try {while ( parent && parent !== src ) {parent = parent.parentNode;}if ( parent !== src ) {facade._dispatch( [ src ], type, e );}} catch(err) { };}));},teardown: function(){$.unbind( this, mapper, $._data( type+"_handle" ) );}};});}//在标准浏览器里面模拟focusinif( !$.eventSupport("focusin") ){"focusin_focus,focusout_blur".replace(rmapper, function(_,type, mapper){var notice = 0, focusinNotify = function (e) {var src = e.targetdo{//模拟冒泡var events = $._data( src, "events" );if(events && events[ type ]){facade._dispatch( [ src ], type, e );}} while (src = src.parentNode );}eventAdapter[ type ] = {setup: function( ) {if ( notice++ === 0 ) {document.addEventListener( mapper, focusinNotify, true );}},teardown: function() {if ( --notice === 0 ) {document.removeEventListener( mapper, focusinNotify, true );}}};});}try{//FF需要用DOMMouseScroll事件模拟mousewheel事件document.createEvent("MouseScrollEvents");eventAdapter.mousewheel = {bindType    : "DOMMouseScroll",delegateType: "DOMMouseScroll"}try{//可能末来FF会支持标准的mousewheel事件，则需要删除此分支document.createEvent("WheelEvent");delete eventAdapter.mousewheel;}catch(e){};}catch(e){};//当一个元素，或者其内部任何一个元素获得焦点的时候会触发这个事件。//这跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。var  rquickIs = /^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/function quickParse( selector ) {var quick = rquickIs.exec( selector );if ( quick ) {//   0  1    2   3// [ _, tag, id, class ]quick[1] = ( quick[1] || "" ).toLowerCase();quick[3] = quick[3] && new RegExp( "(?:^|\\s)" + quick[3] + "(?:\\s|$)" );}return quick;}"on_bind,off_unbind".replace( rmapper, function(_,method, mapper){$.fn[ method ] = function(types, selector, fn ){//$.fn.on $.fn.offif ( typeof types === "object" ) {for ( var type in types ) {$.fn[ method ].call(this, type, selector, types[ type ], fn );}return this;}var hash = {};for(var i = 0 ; i < arguments.length; i++ ){var el = arguments[i];if(typeof el == "number"){hash.times = el}else if(typeof el == "function"){hash.callback = el}if(typeof el === "string"){if(hash.type != null){hash.selector = el.trim()}else{hash.type = el.trim()}}}if(method === "on"){if( !hash.type || !hash.callback ){//必须指定事件类型与回调return this;}hash.times = hash.times > 0  ? hash.times : Infinity;hash.selector =  hash.selector ? quickParse( hash.selector ) : false}if(this.mass && this.each){return this.each(function() {facade[ mapper ].call( this, hash );});}else{return facade[ mapper ].call( this, hash );}}$.fn[ mapper ] = function(){// $.fn.bind $.fn.unbindreturn $.fn[ method ].apply(this, arguments );}});$.implement({toggle: function(/*fn1,fn2,fn3*/){var fns = [].slice.call(arguments), i = 0;return this.click(function(e){var fn  = fns[i++] || fns[i = 0, i++];fn.call( this, e );})},hover: function( fnIn, fnOut ) {return this.mouseenter( fnIn ).mouseleave( fnOut || fnIn );},delegate: function( selector, types, fn, times ) {return this.on( types, selector, fn, times);},live: function( types, fn, times ) {$( this.ownerDocument ).on( types, this.selector, fn, times );return this;},one: function( types, fn ) {return this.on( types, fn, 1 );},undelegate: function(selector, types, fn ) {return arguments.length == 1? this.off( selector, "**" ) : this.off( types, fn, selector );},die: function( types, fn ) {$( this.ownerDocument ).off( types, fn, this.selector || "**", fn );return this;},fire: function(  ) {var args = arguments;if(this.mass && this.each){return this.each(function() {$.event.fire.apply(this, args );});}else{return $.event.fire.apply(this, args );}}});types.replace( $.rword, function( type ){$.fn[ type ] = function( callback ){return callback?  this.bind( type, callback ) : this.fire( type );}});
});

event_fix.js

//=========================================
//  事件补丁模块
//==========================================
$.define("event_fix", !!document.dispatchEvent, function(){//模拟IE678的reset,submit,change的事件代理var rform  = /^(?:textarea|input|select)$/i ,changeType = {"select-one": "selectedIndex","select-multiple": "selectedIndex","radio": "checked","checkbox": "checked"}function changeNotify( e ){if( e.propertyName === ( changeType[ this.type ] || "value") ){$._data( this, "_just_changed", true );$.event._dispatch( $._data( this, "publisher" ), "change", e );}}function changeFire( e ){if( !$._data( this,"_just_changed" ) ){$.event._dispatch( $._data( this ,"publisher"), "change", e );}else{$.removeData( this, "_just_changed", true );}}function delegate( fn ){ return function( src, selector, type ){var adapter = $.event.eventAdapter,fix = adapter[ type ] && adapter[ type ].check && adapter[ type ].check( src );return (fix || selector) ? fn(src, type, fix) : false;}}var facade = $.event = {eventAdapter:{//input事件的支持情况：IE9+，chrome+, gecko2+, opera10+,safari+input: {check: function(src){return rform.test(src.tagName) && !/^select/.test(src.type);},bindType: "change",delegateType: "change"},change: {//change事件的冒泡情况 IE6-9全灭check: function(src){return rform.test(src.tagName) && /radio|checkbox/.test(src.type)},setup: delegate(function( src, type, fix ){var subscriber = $._data( src, "subscriber", {} );//用于保存订阅者的UUID$._data( src, "_beforeactivate", $.bind( src, "beforeactivate", function() {var e = src.document.parentWindow.event, target = e.srcElement, tid = $.getUid( target )//如果发现孩子是表单元素并且没有注册propertychange事件，则为其注册一个，那么它们在变化时就会发过来通知顶层元素if ( rform.test( target.tagName) && !subscriber[ tid ] ) {subscriber[ tid] = target;//表明其已注册var publisher = $._data( target,"publisher") || $._data( target,"publisher",{} );publisher[ $.getUid(src) ] = src;//此孩子可能同时要向N个顶层元素报告变化$.fn.on.call( target,"propertychange._change", changeNotify );//允许change事件可以通过fireEvent("onchange")触发if(type === "change"){$._data(src, "_change_fire", $.bind(target, "change", changeFire.bind(target, e) ));}}}));if( fix ){//如果是事件绑定src.fireEvent("onbeforeactivate")}}),teardown: delegate(function( src, els, i ){$.unbind( src, "beforeactive", $._data( src, "_beforeactivate") );$.unbind( src, "change", $._data(src, "_change_fire")  );els = $.removeData( src, "subscriber", true ) || {};for( i in els){facade.unbind.call( els[i], "._change" );var publisher = $._data( els[i], "publisher");if(publisher){delete publisher[ src.uniqueNumber ];}}})}}}var adapter = facade.eventAdapter;//submit事件的冒泡情况----IE6-9 :form ;FF: document; chrome: window;safari:window;opera:window//reset事件的冒泡情况----FF与opera能冒泡到document,其他浏览器只能到form"submit,reset".replace( $.rword, function( type ){adapter[ type ] = {setup: delegate(function( src ){$.fn.on.call( src, "click._"+type+" keypress._"+type, function( e ) {var el = e.target;if( el.form && (adapter[ type ].keyCode[ e.which] || adapter[ type ].kind[  el.type ] ) ){facade._dispatch( [ src ], type, e );}});}),keyCode: $.oneObject(type == "submit" ? "13,108" : "27"),kind:  $.oneObject(type == "submit" ? "submit,image" : "reset"),teardown: delegate(function( src ){facade.unbind.call( src, "._"+type );})};});
});
//2012.5.1 fix delegate BUG将submit与reset这两个适配器合而为一