jQuery源码解析之on事件绑定

 1 <div id="div" style="font-weight:800;font-size:24px;text-align:center;color:red;"> 2 ????<p id="paragraph">test events </p> 3 </div> 4 ?5 <script src="../jquery-3.2.1.js"></script> 6 <script> 7 $(function(){ ????8 ????$(document).on("click","#paragraph",function(){ 9 ????????console.log(‘this is paragraph‘);10 ????});11 ????$(document).on("click","#div",function(){12 ????????console.log(‘this is div‘);13 ????});14 ????$(document).on("click","#addDiv",function(){15 ????????console.log(‘this is add div‘);16 ????});17 ????18 ????setTimeout(function(){19 ????????createDiv();20 ????},2000);21 });22 23 function createDiv(){24 ????$("<div>").attr("id","addDiv").html("this is a div add after event binding").appendTo($("body"));25 }26 </script>

 1 jQuery.fn.extend( { 2 ?3 ????on: function( types, selector, data, fn ) { 4 ????????return on( this, types, selector, data, fn ); 5 ????}, 6 //..... 7 ?8 //on方法对传入的参数做了一些转换 9 function on( elem, types, selector, data, fn, one ) {10 ????var origFn, type;11 12 ????// Types can be a map of types/handlers13 ????if ( typeof types === "object" ) {14 15 ????????// ( types-Object, selector, data )16 ????????if ( typeof selector !== "string" ) {17 18 ????????????// ( types-Object, data )19 ????????????data = data || selector;20 ????????????selector = undefined;21 ????????}22 ????????for ( type in types ) {23 ????????????on( elem, type, selector, data, types[ type ], one );24 ????????}25 ????????return elem;26 ????}27 28 ????if ( data == null && fn == null ) {29 30 ????????// ( types, fn )31 ????????fn = selector;32 ????????data = selector = undefined;33 ????} else if ( fn == null ) {34 ????????if ( typeof selector === "string" ) {35 36 ????????????// ( types, selector, fn )37 ????????????fn = data;38 ????????????data = undefined;39 ????????} else {40 41 ????????????// ( types, data, fn )42 ????????????fn = data;43 ????????????data = selector;44 ????????????selector = undefined;45 ????????}46 ????}47 ????if ( fn === false ) {48 ????????fn = returnFalse;49 ????} else if ( !fn ) {50 ????????return elem;51 ????}52 53 ????if ( one === 1 ) {54 ????????origFn = fn;55 ????????fn = function( event ) {56 57 ????????????// Can use an empty set, since event contains the info58 ????????????jQuery().off( event );59 ????????????return origFn.apply( this, arguments );60 ????????};61 62 ????????// Use same guid so caller can remove using origFn63 ????????fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );64 ????}65 //最终的结果由jQuery.event.add方法实现66 ????return elem.each( function() {67 ????????jQuery.event.add( this, types, fn, data, selector );68 ????} );69 }

 ?1 add: function( elem, types, handler, data, selector ) { ?2 ??3 ????????var handleObjIn, eventHandle, tmp, ?4 ????????????events, t, handleObj, ?5 ????????????special, handlers, type, namespaces, origType, ?6 ??????????? elemData = dataPriv.get( elem );//此处从内存中获取document对象的数据，
　　　　//第一次绑定时是没有数据的，程序将执行cache方法，创建一个{}值作为document的值，并返回该值的引用。
　　　　//若内存中已存在document的数据，则直接返回。
　　　　//此时elemData为document对象在内存中的数据的引用，下面将为它赋值

cache: function( owner ) {

　　　　// Check if the owner object already has a cache
　　var value = owner[ this.expando ];

　　　　// If not, create one
　　if ( !value ) {
　　　　value = {};

// We can accept data for non-element nodes in modern browsers,
// but we should not, see #8335.
// Always return an empty object.
　　if ( acceptData( owner ) ) {

　　　　// If it is a node unlikely to be stringify-ed or looped over
　　　　// use plain assignment
　　　　　　if ( owner.nodeType ) {
　　　　　　owner[ this.expando ] = value;

　　　　　　// Otherwise secure it in a non-enumerable property
　　　　　　// configurable must be true to allow the property to be
　　　　　　// deleted when data is removed
　　　　　　} else {
　　　　　　　　Object.defineProperty( owner, this.expando, {
　　　　　　　　　　value: value,
　　　　　　　　　　configurable: true
　　　　　　　　} );
　　　　　　}
　　　　}
　　}

　　return value;
},

get: function( owner, key ) {
　　　　return key === undefined ?

　　　　　　　　　　this.cache( owner ) :

　　　　　　　　　　// Always use camelCase key (gh-2257)

　　　　　　　　owner[ this.expando ] && owner[ this.expando ][ jQuery.camelCase( key ) ];

},

 ?7 ??8 ????????// Don‘t attach events to noData or text/comment nodes (but allow plain objects) ?9 ????????if ( !elemData ) { 10 ????????????return; 11 ????????} 12 ?13 ????????// Caller can pass in an object of custom data in lieu of the handler 14 ????????if ( handler.handler ) { 15 ????????????handleObjIn = handler; 16 ????????????handler = handleObjIn.handler; 17 ????????????selector = handleObjIn.selector; 18 ????????} 19 ?20 ????????// Ensure that invalid selectors throw exceptions at attach time 21 ????????// Evaluate against documentElement in case elem is a non-element node (e.g., document) 22 ????????if ( selector ) { 23 ????????????jQuery.find.matchesSelector( documentElement, selector ); 24 ????????} 25 ?26 ????????// Make sure that the handler has a unique ID, used to find/remove it later 27 ????????if ( !handler.guid ) { 28 ????????????handler.guid = jQuery.guid++; 29 ????????} 30 ?31 ????????// Init the element‘s event structure and main handler, if this is the first 32 ????????if ( !( events = elemData.events ) ) { 33 ????????????events = elemData.events = {};//为elemData添加events对象属性， 34 ????????} 35 ????????if ( !( eventHandle = elemData.handle ) ) { 36 ????????????eventHandle = elemData.handle = function( e ) {//事件触发时，调用该函数；为elemData添加handle方法 37 ?38 ????????????????// Discard the second event of a jQuery.event.trigger() and 39 ????????????????// when an event is called after a page has unloaded 40 ????????????????return typeof jQuery !== "undefined" && jQuery.event.triggered !== e.type ? 41 ????????????????????jQuery.event.dispatch.apply( elem, arguments ) : undefined; 42 ????????????}; 43 ????????} 44 ?45 ????????// Handle multiple events separated by a space 46 ????????types = ( types || "" ).match( rnothtmlwhite ) || [ "" ]; 47 ????????t = types.length; 48 ????????while ( t-- ) { 49 ????????????tmp = rtypenamespace.exec( types[ t ] ) || []; 50 ????????????type = origType = tmp[ 1 ]; 51 ????????????namespaces = ( tmp[ 2 ] || "" ).split( "." ).sort(); 52 ?53 ????????????// There *must* be a type, no attaching namespace-only handlers 54 ????????????if ( !type ) { 55 ????????????????continue; 56 ????????????} 57 ?58 ????????????// If event changes its type, use the special event handlers for the changed type 59 ????????????special = jQuery.event.special[ type ] || {}; 60 ?61 ????????????// If selector defined, determine special event api type, otherwise given type 62 ????????????type = ( selector ? special.delegateType : special.bindType ) || type; 63 ?64 ????????????// Update special based on newly reset type 65 ????????????special = jQuery.event.special[ type ] || {}; 66 ?67 ????????????// handleObj is passed to all event handlers 68 ????????????handleObj = jQuery.extend( {//将事件绑定时传入的参数：事件类型、选择器、回调函数等封装入handleObj对象中 69 ????????????????type: type, 70 ????????????????origType: origType, 71 ????????????????data: data, 72 ????????????????handler: handler, 73 ????????????????guid: handler.guid, 74 ????????????????selector: selector, 75 ????????????????needsContext: selector && jQuery.expr.match.needsContext.test( selector ), 76 ????????????????namespace: namespaces.join( "." ) 77 ????????????}, handleObjIn ); 78 ?79 ????????????// Init the event handler queue if we‘re the first 80 ????????????if ( !( handlers = events[ type ] ) ) { 81 ????????????????handlers = events[ type ] = [];//为elemData.events.click赋值为[]，同时handlers指向该数组 82 ????????????????handlers.delegateCount = 0; 83 ?84 ????????????????// Only use addEventListener if the special events handler returns false 85 ????????????????if ( !special.setup || 86 ????????????????????special.setup.call( elem, data, namespaces, eventHandle ) === false ) { 87 ?88 ????????????????????if ( elem.addEventListener ) {//绑定事件，注意事件是绑定到elem上的，即document对象上 89 ????????????????????????elem.addEventListener( type, eventHandle ); 90 ????????????????????} 91 ????????????????} 92 ????????????} 93 ?94 ????????????if ( special.add ) { 95 ????????????????special.add.call( elem, handleObj ); 96 ?97 ????????????????if ( !handleObj.handler.guid ) { 98 ????????????????????handleObj.handler.guid = handler.guid; 99 ????????????????}100 ????????????}101 102 ????????????// Add to the element‘s handler list, delegates in front103 ????????????if ( selector ) {104 ????????????????handlers.splice( handlers.delegateCount++, 0, handleObj );
/**将handleObj中的属性插入到handlers中，即document在内存中的数据={handle:f(),

　　　　events:{click:[{type: "click", origType: "click", data: undefined, guid: 1, handler: ?(),selector:"#div",namespace:"",needContext:false}},
　　　　　　　　delegateCount:1]}}**/105 ????????????} else {106 ????????????????handlers.push( handleObj );107 ????????????}108 109 ????????????// Keep track of which events have ever been used, for event optimization110 ????????????jQuery.event.global[ type ] = true;111 ????????}112 113 ????},//事件绑定完成

 1 dispatch: function( nativeEvent ) { 2 ?3 ????????// Make a writable jQuery.Event from the native event object 4 ????????var event = jQuery.event.fix( nativeEvent );//将原生事件对象转化为jquery的event 5 ?6 ????????var i, j, ret, matched, handleObj, handlerQueue, 7 ????????????args = new Array( arguments.length ), 8 ????????????handlers = ( dataPriv.get( this, "events" ) || {} )[ event.type ] || [],//获取事件绑定时document存储的参数值 9 ????????????special = jQuery.event.special[ event.type ] || {};10 11 ????????// Use the fix-ed jQuery.Event rather than the (read-only) native event12 ????????args[ 0 ] = event;13 14 ????????for ( i = 1; i < arguments.length; i++ ) {15 ????????????args[ i ] = arguments[ i ];16 ????????}17 18 ????????event.delegateTarget = this;19 20 ????????// Call the preDispatch hook for the mapped type, and let it bail if desired21 ????????if ( special.preDispatch && special.preDispatch.call( this, event ) === false ) {22 ????????????return;23 ????????}24 25 ????????// Determine handlers26 ????????handlerQueue = jQuery.event.handlers.call( this, event, handlers );//从document的所有事件参数中，筛选出当前点击目标的参数对象

　　　　handlers: function( event, handlers ) { ???????var i, handleObj, sel, matchedHandlers, matchedSelectors, ???????????handlerQueue = [], ???????????delegateCount = handlers.delegateCount,//委派次数 ???????????cur = event.target;//委派的目标，如#addDiv ???????// Find delegate handlers ???????if ( delegateCount && ???????????// Support: IE <=9 ???????????// Black-hole SVG <use> instance trees (trac-13180) ???????????cur.nodeType && ???????????// Support: Firefox <=42 ???????????// Suppress spec-violating clicks indicating a non-primary pointer button (trac-3861) ???????????// https://www.w3.org/TR/DOM-Level-3-Events/#event-type-click ???????????// Support: IE 11 only ???????????// ...but not arrow key "clicks" of radio inputs, which can have `button` -1 (gh-2343) ???????????!( event.type === "click" && event.button >= 1 ) ) { ???????????for ( ; cur !== this; cur = cur.parentNode || this ) { ???????????????// Don‘t check non-elements (#13208) ???????????????// Don‘t process clicks on disabled elements (#6911, #8165, #11382, #11764) ???????????????if ( cur.nodeType === 1 && !( event.type === "click" && cur.disabled === true ) ) { ???????????????????matchedHandlers = []; ???????????????????matchedSelectors = {}; ???????????????????for ( i = 0; i < delegateCount; i++ ) {//遍历委派的事件参数数组，当selector=当前点击对象cur时，将对应的参数对象放入handlerQueue中　　　　//注意：遍历时对于selector指向的页面元素，无论它是页面加载时已经存在的元素，还是页面加载完成后通过js后来生成的元素，当点击该元素时，程序都能实现对其回调函数的调用。
　　　　//这便是为什么on可以对未来出现的元素进行事件绑定了。

 ???????????????????????handleObj = handlers[ i ]; ???????????????????????// Don‘t conflict with Object.prototype properties (#13203) ???????????????????????sel = handleObj.selector + " "; ???????????????????????if ( matchedSelectors[ sel ] === undefined ) { ???????????????????????????matchedSelectors[ sel ] = handleObj.needsContext ? ???????????????????????????????jQuery( sel, this ).index( cur ) > -1 : ???????????????????????????????jQuery.find( sel, this, null, [ cur ] ).length; ???????????????????????} ???????????????????????if ( matchedSelectors[ sel ] ) { ???????????????????????????matchedHandlers.push( handleObj ); ???????????????????????} ???????????????????} ???????????????????if ( matchedHandlers.length ) { ???????????????????????handlerQueue.push( { elem: cur, handlers: matchedHandlers } ); ???????????????????} ???????????????} ???????????} ???????} ???????// Add the remaining (directly-bound) handlers ???????cur = this; ???????if ( delegateCount < handlers.length ) { ???????????handlerQueue.push( { elem: cur, handlers: handlers.slice( delegateCount ) } ); ???????} ???????return handlerQueue; ???},

27 28 ????????// Run delegates first; they may want to stop propagation beneath us29 ????????i = 0;30 ????????while ( ( matched = handlerQueue[ i++ ] ) && !event.isPropagationStopped() ) {31 ????????????event.currentTarget = matched.elem;32 33 ????????????j = 0;34 ????????????while ( ( handleObj = matched.handlers[ j++ ] ) &&35 ????????????????!event.isImmediatePropagationStopped() ) {//没有调用event.stopImmediatePropagation() 方法，即没有阻止事件传播36 37 ????????????????// Triggered event must either 1) have no namespace, or 2) have namespace(s)38 ????????????????// a subset or equal to those in the bound event (both can have no namespace).39 ????????????????if ( !event.rnamespace || event.rnamespace.test( handleObj.namespace ) ) {40 41 ????????????????????event.handleObj = handleObj;42 ????????????????????event.data = handleObj.data;43 44 ????????????????????ret = ( ( jQuery.event.special[ handleObj.origType ] || {} ).handle ||45 ????????????????????????handleObj.handler ).apply( matched.elem, args );//执行回调函数matched.elem.func(args);
　　　　//突然发现原来是目标elem执行的func回调函数，这也是为什么回调函数中的$(this)会指向当前绑定的jquery对象了。46 47 ????????????????????if ( ret !== undefined ) {//如果回调函数返回值为false时，则阻止事件的默认操作和后续的冒泡传播48 ????????????????????????if ( ( event.result = ret ) === false ) {49 ????????????????????????????event.preventDefault();50 ????????????????????????????event.stopPropagation();51 ????????????????????????}52 ????????????????????}53 ????????????????}54 ????????????}55 ????????}56 57 ????????// Call the postDispatch hook for the mapped type58 ????????if ( special.postDispatch ) {59 ????????????special.postDispatch.call( this, event );60 ????????}61 62 ????????return event.result;63 ????},

 1 var dataPriv = new Data(); 2 //...... 3 ?4 function Data() { 5 ????this.expando = jQuery.expando + Data.uid++; 6 } 7 Data.uid = 1; 8 //...... 9 10 jQuery.extend( {11 12 ????// Unique for each copy of jQuery on the page13 ????expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),14 //......

cache: function( owner ) {　　　　// Check if the owner object already has a cache　　var value = owner[ this.expando ];　　　　// If not, create one　　if ( !value ) {　　　　value = {};// We can accept data for non-element nodes in modern browsers,// but we should not, see #8335.// Always return an empty object.　　if ( acceptData( owner ) ) {　　　　// If it is a node unlikely to be stringify-ed or looped over　　　　// use plain assignment　　　　　　if ( owner.nodeType ) {　　　　　　owner[ this.expando ] = value;//即document[jQuery3210080552146542722581]={}　　　　　　// Otherwise secure it in a non-enumerable property　　　　　　// configurable must be true to allow the property to be　　　　　　// deleted when data is removed　　　　　　} else {　　　　　　　　Object.defineProperty( owner, this.expando, {　　　　　　　　　　value: value,　　　　　　　　　　configurable: true　　　　　　　　} );　　　　　　}　　　　}　　}　　return value;},

　　get: function( owner, key ) {
　　　　return key === undefined ?

　　　　　　　　　　this.cache( owner ) :

　　　　　　　　　　// Always use camelCase key (gh-2257)

　　　　　　　　owner[ this.expando ] && owner[ this.expando ][ jQuery.camelCase( key ) ];

//即document[jQuery3210080552146542722581]={handle:f(),events:{
　　　　　　click:[{type: "click", origType: "click", data: undefined, guid: 1, handler: ?(),selector:"#div",namespace:"",needContext:false}},

　　　　　　delegateCount:1]}}

　　},