首页 > 代码库 > javascript事件之:jQuery事件中实例对象和拓展对象之间的通信

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和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事件对象下的这三个方法是主题。其余都是修正浏览器的兼容性和为这三个方法服务的工具方法。

 

javascript事件之:jQuery事件中实例对象和拓展对象之间的通信