我們總結過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事件對象下的這三個方法是主題。其余都是修正瀏覽器的兼容性和為這三個方法服務的工具方法。

?

轉載于:https://www.cnblogs.com/pfzeng/p/4158695.html

總結

以上是生活随笔為你收集整理的javascript事件之：jQuery事件中实例对象和拓展对象之间的通信的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。