jQuery的事件模型

前几天自己着重读了jQuery1.11.1的源码，又结合了之前对DE事件模型的分析，最后也实现一个简陋的事件模型。

jQuery的事件系统离不开jQuery的缓存系统。

jQuery的第一代缓存是直接将数据存储在 缓存体 这个数据结构中，但是需要在元素上添加一个uuid来作为标示，

标记在缓存体中的位置。但是仔细想想，就会发现，如果对window或者document进行事件侦听，就会在这两个

对象上添加额外属性，会造成全局污染，不是很好。

所以jQuery第二代缓存系统应运而生，这次不对元素进行添加属性，而是判断元素的valueOf()方法的返回值，如果没有返回值是

对象，则说明缓存体中并没有该元素的缓存数据，进而使用ECMA5的Object.defineProperty来对valueOf方法进行重写，并返回

一个guid，作为访问缓存体的钥匙。

简单讲述了缓存系统，现在着重讲解下jQuery的事件系统：

主要使用了几个数据结构，即元素的缓存体，Event构造函数，和Handler构造函数。

　　当使用bind(el,type,fn)添加回调时，会根据Handler构造函数构造一个handler实例，在我的具体实现中，参数fn可能是一个函数，也可能

是一个对象，若是对象，则标记这个回调函数的功能--once函数或者throttle函数或delay函数。 其次就是对fn的封装，在库中，fn的包装函数

实现了新事件对象的创建，以及对新创建的事件对象的修补，并调整了在回调中this的指向。最后将该handlerObj存入该元素对应的缓存体中，

并用addEvent绑定事件。

　　使用unbind移除回调也比较简单，无非是移除缓存，移除回调。

　　trigger触发回调主要就是传入参数的处理，执行带有参数的回调。

　　

现附上简单的实现：

         // HandlerObject constructor
         function Handler(config){
             this.handler = config.handler;
             this.special = config.special; //特殊的回调，ex. once函数，throggle函数等等，原回调放在此处，handler放包裹后的回调
             this.type = config.type;
             this.namespace = config.namespace;
             this.data = config.data;
             this.once = config.once;
             this.delay = config.delay;
             this.throttle = config.throttle;
             this.stop = config.stop;  //  取消默认和冒泡
             this.stopBubble = config.stopBubble;
             this.preventDefalut = config.preventDefalut;
         }
         //typeEvents=[handlerObj1,handlerObj2,...]
         function execHandlers(el,event,args,context){  // 若args不为空，则为自定义事件出发，trigger
             if(el.nodeValue == 3 || el.nodeValue == 8) return;
             var elData,events,handlers,typeEvents,ret,
                 flag = true;
             context = context || el;
             //获取缓存对象
             elData= S._data(el);
             if(!elData || !elData['events'])return;
             events = elData['events'];
             handlers = elData['handlers'];
             if(!events[event.type])return;
             typeEvents = events[event.type];

             // 如果其中一个回调执行出错，函数库也不会抛错
             for(var i = 0,len=typeEvents.length;i<len;i++){

                 // 捕获错误，如果一个事件绑定多个回调，其中一个回调出错不会影响其他回调执行
                 try{
                     // 如果设置var isImmediatePropagationStopped，那么执行两件事：
                     //  1,停止执行该元素同事件的其他处理函数
                     //  2,停止冒泡
                     if(event.isImmediatePropagationStopped()) break;
                     ret = execHandler(el,event,typeEvents[i],args,context);
                     if(ret == false){
                         flag = false
                     }
                 }catch(e){
                     setTimeout(function(){
                         throw Error(e);   // 异步抛出错误
                     },0);

                     if(i < len && i+1 <len){
                         i++;
                         ret = execHandler(el,event,typeEvents[i],args,context);
                         if(ret == false){
                             flag = false
                         }
                     }
                 }
             }
             if(!flag){
                 event.preventDefault();
                 event.stopPropagation();
             }
             return;
         }
         function execHandler(el,event,handlerObj,args,context){
             var handler = handlerObj.handler,
                 type = event.type,
                 special = handlerObj.special,
                 stop = handlerObj.stop,
                 preventDefault = handlerObj.preventDefalut,
                 stopBubble = handlerObj.stopBubble,
                 data = handlerObj.data,
                 once = handlerObj.once,
                 delay = handlerObj.delay,  // 时延
                 throttle = handlerObj.throttle; //最小间隔时间
             if(handlerObj.type && type !== handlerObj.type) return;

             if(!handler || !S.isFunction(handler))return;

             if(stop){
                 event.preventDefalut();
                 event.stopPropagation();
             }
             if(preventDefault){
                 event.preventDefalut();
             }
             if(stopBubble){
                 event.stopPropagation();
             }

             if(once){
                 var onceHandler = function(event,args){
                     return S.once(handler,context,event,args);
                 };
                 return onceHandler.call(context,event,args);
             }
             if(delay && S.isNumber(delay)){
                 var delayHandler = function(event,args){
                     return S.delay(handler,context,delay,event,args);
                 }
                 return delayHandler.call(context,event,args);
             }
             if(throttle && S.isNumber(throttle)){
                 var throttleHandler = function(event,args){
                     return S.throttle(handler,context,throttle,event,args);
                 }
                 return throttleHandler.call(context,event,args);
             }

             if(handler){
                 return handler.call(context,event,args);
             }
             return;
         }

         function returnTrue(){
             return true;
         }
         function returnFalse(){
             return false;
         }
         //Event constructor
         function Event(e){ //传入事件参数
             this.originalEvent = e;
             this.isPreventDefault = returnFalse;
             this.isStopPropagation = returnFalse;
             this.isImmediatePropagationStopped = returnFalse;
             var type = e.type;
             if(/^(\w+)\.(\w+)$/.test(type)){
                 this.type = RegExp.$1;
                 this.namespace = RegExp.$2
             }else{
                 this.type = type;
                 this.namespace = '';
             }
         }

         Event.prototype = {
             preventDefault: function(){
                 var e = this.originalEvent;
                 if(e.preventDefalut){
                     return e.preventDefault();
                 }
                 e.returnValue = false;
                 this.isPreventDefault = returnTrue;
                 return;
             },
             stopPropagation: function(){
                 var e = this.originalEvent;
                 if(e.stopPropagation){
                     return e.stopPropagation();
                 }
                 e.stopBubble = true;
                 this.isStopPropagation = returnTrue;
                 return;
             },
             stopImmediatePropagation: function(){
                 this.stopPropagation();
                 this.isImmediatePropagationStopped = returnTrue;
             }
         };
         //事件修复
         function fixEvent(event){
             var i, prop, props = [], originalEvent = event.originalEvent;

             props = props.concat('altKey bubbles button cancelable charCode clientX clientY ctrlKey currentTarget'.split(' '));
             props = props.concat('data detail eventPhase fromElement handler keyCode layerX layerY metaKey'.split(' '));
             props = props.concat('newValue offsetX offsetY originalTarget pageX pageY prevValue relatedTarget'.split(' '));
             props = props.concat('screenX screenY shiftKey target toElement view wheelDelta which'.split(' '));
             for(i=props.length;--i;){
                 event[props[i]] = originalEvent[props[i]];
             }

             if(!event.target){
                 event.target = event.srcElement;
             }

             if(event.target.nodeType == 3){
                 event.target = event.target.parentNode;
             }

             if(!event.relatedTarget){
                 event.relatedTarget = event.fromElement === event.target? event.toElement : event.fromElement;
             }

             if(!event.which && (event.charCode || event.keyCode)){
                 event.which = event.charCode ? event.charCode : event.keyCode ? event.keyCode : null;
             }

             if(!event.pageX || !event.pageY){
                 event.pageX = event.clientX + (doc.documentElement && doc.documentElement.scrollLeft || doc.body && doc.body.scrollLeft || 0)
                 - (doc.documentElement && doc.documentElement.clientLeft || doc.body && doc.body.clientLeft || 0);
                 event.pageY = event.clientY + (doc.documentElement && doc.documentElement.scrollTop || doc.body && doc.body.scrollTop || 0)
                     - (doc.documentElement && doc.documentElement.clientTop || doc.body && doc.body.clientTop || 0);
             }

             if(!event.which && event.button != undefined){ //ie下 0 无动作, 1 左键 ,2 右键, 4 中间键
                 event.which = (event.button & 1) ? 1 : (event.button & 2) ? 3 : (event.button & 4) ? 2 : 0;
             }
             return event;
         }

         function bind(el,type,fn){
             if(el.nodeType && el.nodeType == 3 || el.nodeType == 8) return;

             var elData= S._data(el),events,handlers,typeEvents;
             if(!elData) {
                 S._lockData(el);  //开辟缓存
                 elData = S._data(el);
             }
             if(!elData['events']){
                 elData['events']  = {};
             }
             events = elData['events'];
             handlers = elData['handlers'];  // 目前先不对其赋值
             if(!events[type]){
                 events[type] = [];
             }
             typeEvents = events[type];

             var handlerObj;
             if(S.isFunction(fn)){
                 handlerObj = new Handler({handler: fn});
             }else if(S.isObject(fn)){
                 handlerObj = new Handler(fn);
             }else{
                 return;
             }

             handlerObj.handlerHook = function(event,args){  // 函数钩子，用于unbind删除回调函数
                 event = event || window.event;
                 var e = new Event(event);
                 e = fixEvent(e);
                 execHandlers(el,e,args,el);
             };

             if(!typeEvents || !typeEvents.length)
                 addEvent(el,type,handlerObj.handlerHook);

             typeEvents.push(handlerObj);
         }

         function unbind(el,type,fn){
             var newEvents = [];
             if(el.nodeType && el.nodeType == 3 || el.nodeType == 8) return;

             var elData= S._data(el),events,handlers,typeEvents;

             if(!elData || !elData['events'])return;

             if(arguments.length == 1){  // 删除该元素所有缓存 事件
                 for(var i in elData['events']){
                     if(elData['events'].hasOwnProperty(i)){
                         for(var j=0,len=elData['events'][i].length;j<len;j++){
                             removeEvent(el,i,elData['events'][i][j].handlerHook);
                         }
                     }
                 }
                 S._unData(el);
             }

             events = elData['events'][type];
             newEvents = events.concat();

             if(arguments.length == 2 && events){
                 try{
                     for(var i= 0,len=events.length;i<len;i++){
                         removeEvent(el,type,events[i].handlerHook);
                     }
                 }catch(e){
                     throw new TypeError('哎呀啊，解除回调出现意外')
                 }

                 events = {};
                 delete elData[type];
             }

             if(arguments.length == 3){
                 for(var i= 0,len=events.length;i<len;i++){
                     if(events[i].handler === fn){
                         try{
                             removeEvent(el,type,events[i].handlerHook);
                         }catch(e){
                             throw new TypeError('哎呀啊，解除回调出现意外')
                         }
                         newEvents.splice(i,1);
                     }
                 }
             }
             elData['events'][type] = events = newEvents;
         }

         function trigger(el,type,args){
             if(el.nodeType && el.nodeType == 3 || el.nodeType == 8) return;

             var elData= S._data(el),events,handlers,typeEvents;

             if(!elData || !elData['events'] || !elData['events'][type])return;
             events = elData['events'][type];

             var handlerObj,event;
             event = {
                 target: el,
                 type: type,
                 data: args
             };
             for(var len=events.length;--len>=0;){
                 handlerObj = events[len];
                 handlerObj.handlerHook(event,args);
             }
         }