javascript事件之：jQuery事件中实例对象和拓展对象之间的通信
我们总结过jQery事件中的实例原型对象对外接口和拓展对象，现在我们看看他们是如何进行通信联系的。
先来看便捷方法：
1 //调用的还是实例对象下的on()和trigger() 2 jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " + 3 "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + 4 "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) { 5 jQuery.fn[ name ] = function( data, fn ) { 6 return arguments.length > 0 ? 7 this.on( name, null, data, fn ) : 8 this.trigger( name ); 9 }; 10 }); 11 12 jQuery.fn.extend({ 13 //调用的是上面实例的mouseenter和mouseleave 14 hover: function( fnOver, fnOut ) { 15 return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver ); 16 }, 17 //调用的是实例下的on 18 bind: function( types, data, fn ) { 19 return this.on( types, null, data, fn ); 20 }, 21 //调用的是实例下的off 22 unbind: function( types, fn ) { 23 return this.off( types, null, fn ); 24 }, 25 //调用的是实例下的on 26 delegate: function( selector, types, data, fn ) { 27 return this.on( types, selector, data, fn ); 28 }, 29 //调用的是实例下的off 30 undelegate: function( selector, types, fn ) { 31 // ( namespace ) or ( selector, types [, fn] ) 32 return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn ); 33 } 34 });
所以便捷方法知识调用了实例下的on，off，triger三个方法。其本身的学习价值不高。
接下来是另外几个供便捷方法调用的实例方法。
1 jQuery.fn.extend({ 2 //调用的是jQuery.event下的add() 3 on: function( types, selector, data, fn, /*INTERNAL*/ one ) { 4 jQuery.event.add( this, types, fn, data, selector );... 5 }, 6 //调用的是上面的on 7 one: function( types, selector, data, fn ) { 8 return this.on( types, selector, data, fn, 1 ); 9 }, 10 //调用的是jQuery.event下的remove() 11 off: function( types, selector, fn ) { 12 jQuery.event.remove( this, types, fn, selector );... 13 }, 14 //调用的是jQuery.event下的trigger() 15 trigger: function( type, data ) { 16 return this.each(function() { 17 jQuery.event.trigger( type, data, this ); 18 }); 19 }, 20 //调用的是jQuery.event下的trigger() 21 triggerHandler: function( type, data ) { 22 return jQuery.event.trigger( type, data, elem, true );... 23 } 24 })
这里调用的主要是jQuery.event下的3个方法：add(), remove(), trigger()。其本身的学习意义也不大。我们来看jQuery.event下的这三个方法。
1 jQuery.event = { 2 global: {}, 3 //绑定事件 4 add: function( elem, types, handler, data, selector ) { 5 ... 6 special = jQuery.event.special[ type ] || {}; 7 ... 8 jQuery.event.dispatch.apply( eventHandle.elem, arguments ) 9 10 }, 11 //移除事件 12 remove: function( elem, types, handler, selector, mappedTypes ) { 13 ... 14 special = jQuery.event.special[ type ] || {}; 15 if ( rfocusMorph.test( type + jQuery.event.triggered ) ) { 16 }, 17 //手动触发事件 18 trigger: function( event, data, elem, onlyHandlers ) {}， 19 //事件分发 20 dispatch: function( event ) {}, 21 handlers: function( event, handlers ) {}, 22 props: "altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "), 23 fixHooks: {}, 24 //对键盘事件对象的属性和修正方法 25 keyHooks: {}, 26 //对鼠标事件对象的属性和修正方法 27 mouseHooks: {}, 28 //兼容性相关 29 fix: function( event ) {}, 30 //事件修正对象集 31 special: { 32 load: { 33 noBubble: true 34 }， 35 focus: { 36 trigger: function() {}, 37 delegateType: "focusin" 38 }, 39 blur: { 40 trigger: function() {}, 41 delegateType: "focusout" 42 }, 43 click: { 44 trigger: function() {}, 45 _default: function(){} 46 }, 47 beforeunload: { 48 postDispatch: function( event ) {} 49 } 50 }, 51 //模拟事件，修正事件兼容性游泳 52 simulate: function( type, elem, event, bubble ) {} 53 }
jQuery事件对象下的这三个方法是主题。其余都是修正浏览器的兼容性和为这三个方法服务的工具方法。
