我们总结过,现在我们看看他们是如何进行通信联系的。
先来看便捷方法:
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和mouseleave14 hover: function( fnOver, fnOut ) {15 return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );16 },17 //调用的是实例下的on18 bind: function( types, data, fn ) {19 return this.on( types, null, data, fn );20 },21 //调用的是实例下的off22 unbind: function( types, fn ) {23 return this.off( types, null, fn );24 },25 //调用的是实例下的on26 delegate: function( selector, types, data, fn ) {27 return this.on( types, selector, data, fn );28 },29 //调用的是实例下的off30 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: true34 },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事件对象下的这三个方法是主题。其余都是修正浏览器的兼容性和为这三个方法服务的工具方法。