jQuery挖源码——事件绑定

jQuery版本：2.1.4

 

  • 最常用事件绑定bind，调用了on。
1 bind: function( types, data, fn ) {
2         return this.on( types, null, data, fn );
3     }

        对应解绑unband，调用了off。

1 unbind: function( types, fn ) {
2         return this.off( types, null, fn );
3     }

 

  • 只执行一次的one绑定，赤裸裸调用on。
1 one: function( types, selector, data, fn ) {
2         return this.on( types, selector, data, fn, 1 );
3     }

 

  • 委托delegate，调用on
1 delegate: function( selector, types, data, fn ) {
2         return this.on( types, selector, data, fn );
3     }

        undelegate调用off

1 undelegate: function( selector, types, fn ) {
2         // ( namespace ) or ( selector, types [, fn] )
3         return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
4     }

 

  • 最后揭开on的面纱。

参数：

  • types 事件类型
  • selector 委托中是子元素。（曾经的one中貌似没有这个参数）
  • data 参数
  • fn  事件处理函数
  • one  是否one绑定
 1 on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
 2         var origFn, type;
 3 
 4         // Types can be a map of types/handlers
 5         if ( typeof types === "object" ) {
 6             // ( types-Object, selector, data )
 7             if ( typeof selector !== "string" ) {
 8                 // ( types-Object, data )
 9                 data = data || selector;
10                 selector = undefined;
11             }
12             for ( type in types ) {
13                 this.on( type, selector, data, types[ type ], one );
14             }
15             return this;
16         }
17 
18         if ( data == null && fn == null ) {
19             // ( types, fn )
20             fn = selector;
21             data = selector = undefined;
22         } else if ( fn == null ) {
23             if ( typeof selector === "string" ) {
24                 // ( types, selector, fn )
25                 fn = data;
26                 data = undefined;
27             } else {
28                 // ( types, data, fn )
29                 fn = data;
30                 data = selector;
31                 selector = undefined;
32             }
33         }
34         if ( fn === false ) {
35             fn = returnFalse;
36         } else if ( !fn ) {
37             return this;
38         }
39 
40         if ( one === 1 ) {
41             origFn = fn;
42             fn = function( event ) {
43                 // Can use an empty set, since event contains the info
44                 jQuery().off( event );
45                 return origFn.apply( this, arguments );
46             };
47             // Use same guid so caller can remove using origFn
48             fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
49         }
50         return this.each( function() {
51             jQuery.event.add( this, types, fn, data, selector );
52         });
53     }
on

对应解绑off

 1 off: function( types, selector, fn ) {
 2         var handleObj, type;
 3         if ( types && types.preventDefault && types.handleObj ) {
 4             // ( event )  dispatched jQuery.Event
 5             handleObj = types.handleObj;
 6             jQuery( types.delegateTarget ).off(
 7                 handleObj.namespace ? handleObj.origType + "." + handleObj.namespace : handleObj.origType,
 8                 handleObj.selector,
 9                 handleObj.handler
10             );
11             return this;
12         }
13         if ( typeof types === "object" ) {
14             // ( types-object [, selector] )
15             for ( type in types ) {
16                 this.off( type, selector, types[ type ] );
17             }
18             return this;
19         }
20         if ( selector === false || typeof selector === "function" ) {
21             // ( types [, fn] )
22             fn = selector;
23             selector = undefined;
24         }
25         if ( fn === false ) {
26             fn = returnFalse;
27         }
28         return this.each(function() {
29             jQuery.event.remove( this, types, fn, selector );
30         });
31     },
off

 

posted @ 2016-04-02 22:27  海绵小猪  阅读(172)  评论(0)  编辑  收藏  举报