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