jquery事件核心源码分析

     我们从绑定事件开始，一步步往下看：

     以jquery.1.8.3为例，平时通过jquery绑定事件最常用的是on方法，大概分为下面3种类型：

$(target).on('click',function(){
    //函数内容    
})

$(target).on('click','.child',function(){
    //函数内容    
})

$(target).on({
    click:function(){},
    mouseover:function(){},
    mouseout:function(){}
})

    第一种是我们最常用的写法，通过元素选择器，直接绑定事件；

    第二种则是利用了事件委托原理，由最初的父元素代理子元素的事件，动态添加的元素绑定事件用第一种方法时无效的；

    第三种则是同一元素同时绑定多个事件时的简略写法。

    我们来看一下on方法的源码，如果我们想封装插件类似on方法调用，可以像on一样来书写，具体可见另一篇文章jQuery插件开发（溢出滚动）

on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
        var origFn, type;

        // Types can be a map of types/handlers
        //上述第三种用法，传入第一个参数为object

        if ( typeof types === "object" ) {
            // ( types-Object, selector, data )
            if ( typeof selector !== "string" ) { // && selector != null
                // ( types-Object, data )
                data = data || selector;
                selector = undefined;
            }
            for ( type in types ) {
                this.on( type, selector, data, types[ type ], one );
            }
            return this;
        }

        if ( data == null && fn == null ) {
            // ( types, fn )
            fn = selector;
            data = selector = undefined;
        } else if ( fn == null ) {
            if ( typeof selector === "string" ) {
                // ( types, selector, fn )
                fn = data;
                data = undefined;
            } else {
                // ( types, data, fn )
                fn = data;
                data = selector;
                selector = undefined;
            }
        }
        if ( fn === false ) {
            fn = returnFalse;
        } else if ( !fn ) {
            return this;
        }

        if ( one === 1 ) {
            origFn = fn;
            fn = function( event ) {
                // Can use an empty set, since event contains the info
                jQuery().off( event );
                return origFn.apply( this, arguments );
            };
            // Use same guid so caller can remove using origFn
            fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
        }
        return this.each( function() {
            jQuery.event.add( this, types, fn, data, selector );
        });
    }

 

     我们可以看到，on方法内部的代码类似于初始化，通过对传入参数的分析，来矫正type，fn，data，selector等变量，从而正确的调用jquery.event.add方法。jquery.event是事件的核心。

    jquery.event 代码结构如下：

jQuery.event = {
       add:function(){
           
       },
       global:{},
       remove:function(){
           
       },
       customEvent:function(){
           
       },
       trigger:function(){
           
       },
       dispatch:function(){
          //在老版本的jquery，此方法名为handle 
       },
       props:'',
       fixHooks:{
           
       },
       keyHooks    :{
           
       },
       mouseHooks:{
           
       },
       fix:function(){
           
       },
       special:function(){
           
           
       },
       simulate :function(){
           
           
       }
}

      其中add方法通过一些设置为元素注册添加事件：

      所谓的特殊事件指类似于mouseenter,mouseleave,ready事件并不是浏览器所支持的事件，他们不能通过统一的addEventListener/attachEvent来添加这个事件.而是通过setup和teardown来绑定和删除事件，如下：

beforeunload: {
    setup: function( data, namespaces, eventHandle ) {
        // We only want to do this special case on windows
        if ( jQuery.isWindow( this ) ) {
            this.onbeforeunload = eventHandle;
        }
    },

    teardown: function( namespaces, eventHandle ) {
        if ( this.onbeforeunload === eventHandle ) {
            this.onbeforeunload = null;
        }
    }
}

add: function( elem, types, handler, data, selector ) {

  var elemData, eventHandle, events,
      t, tns, type, namespaces, handleObj,
      handleObjIn, handlers, special;

  // Don't attach events to noData or text/comment nodes (allow plain objects tho)
  if ( elem.nodeType === 3 || elem.nodeType === 8 || !types || !handler || !(elemData = jQuery._data( elem )) ) {
      return;
  }
  
  // Caller can pass in an object of custom data in lieu of the handler
  // 如果传入的handler包括handler属性，则通过临时变量将handler与selector设置为正确的指向。
  if ( handler.handler ) {
      handleObjIn = handler;
      handler = handleObjIn.handler;
      selector = handleObjIn.selector;
  }

  // Make sure that the handler has a unique ID, used to find/remove it later
  //为每个元素添加一个唯一的guid
  if ( !handler.guid ) {
      handler.guid = jQuery.guid++;  
  }

  // Init the element's event structure and main handler, if this is the first
  //elemData结构见下面截图
  events = elemData.events;
  if ( !events ) {
      elemData.events = events = {};  //初次绑定事件
  }
  eventHandle = elemData.handle;
  if ( !eventHandle ) {
      //eventHandle 经过dispatch处理，已不同于最初传入的handler
      elemData.handle = eventHandle = function( e ) {
          // Discard the second event of a jQuery.event.trigger() and
          // when an event is called after a page has unloaded
          return typeof jQuery !== "undefined" && (!e || jQuery.event.triggered !== e.type) ?
              jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
              undefined;
      };
      // Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
      eventHandle.elem = elem;
  }

  // Handle multiple events separated by a space
  // jQuery(...).bind("mouseover mouseout", fn);
  types = jQuery.trim( hoverHack(types) ).split( " " );
  for ( t = 0; t < types.length; t++ ) {  //类似 'click input keyUp'一次传入多个事件

      tns = rtypenamespace.exec( types[t] ) || [];
      type = tns[1];
      namespaces = ( tns[2] || "" ).split( "." ).sort();

      // If event changes its type, use the special event handlers for the changed type
      special = jQuery.event.special[ type ] || {};

      // If selector defined, determine special event api type, otherwise given type
      type = ( selector ? special.delegateType : special.bindType ) || type;

      // Update special based on newly reset type
      special = jQuery.event.special[ type ] || {};

      // handleObj is passed to all event handlers
      handleObj = jQuery.extend({
          type: type,
          origType: tns[1],
          data: data,
          handler: handler,
          guid: handler.guid,
          selector: selector,
          needsContext: selector && jQuery.expr.match.needsContext.test( selector ),
          namespace: namespaces.join(".")
      }, handleObjIn );

      // Init the event handler queue if we're the first
      handlers = events[ type ];
      if ( !handlers ) {
          handlers = events[ type ] = [];
          handlers.delegateCount = 0;

          // Only use addEventListener/attachEvent if the special events handler returns false
          //如果为非special事件则由addeventListener或attachEvent事件绑定，否则择优special.setup绑定
          if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
              // Bind the global event handler to the element
              //当前eventHandle是经过处理的eventHandle
              if ( elem.addEventListener ) {
                  elem.addEventListener( type, eventHandle, false );

              } else if ( elem.attachEvent ) {
                  elem.attachEvent( "on" + type, eventHandle );
              }
          }
      }

      if ( special.add ) {
          special.add.call( elem, handleObj );

          if ( !handleObj.handler.guid ) {
              handleObj.handler.guid = handler.guid;
          }
      }
      // Add to the element's handler list, delegates in front
      if ( selector ) {  //元素事件为事件委托
          handlers.splice( handlers.delegateCount++, 0, handleObj );
      } else {           //绑定于元素本身的事件
          handlers.push( handleObj );
      }
      console.log(elemData)
      // Keep track of which events have ever been used, for event optimization
      jQuery.event.global[ type ] = true;
  }

  // Nullify elem to prevent memory leaks in IE
  elem = null;
},

        其中注意 elemData = jQuery._data( elem )  这句，我们简单绑定一个事件，然后看elemData值

$(document).click(function(){
    console.log(1)
})

 

     如上左图，最终结果elemData即jquery的缓存数据中主要包含两个属性，events及handle，其中events包含了当前元素注册的所有事件，如click，keydown等，其中每一个事件下面又可以包括多个handler，每个handler有一个唯一的guid，后面触发及删除相应事件函数都要用到这个，events对象还包含一个属性为delegateCount，则记录着该元素总共代理事件的次数。在右图中可以看到在某一个事件下绑定的不同handler，代理事件（selector部位undefined的情况）排在前面，而绑定在元素自身的事件排在代理事件后面。

     需要注意的是代码中的elem.addEventListener( type, eventHandle, false )并不同于我们简单的将handler处理函数绑定，而是对handler通过dispatch进行了处理。

     另外，在事件函数中，js默认传入的第一个参数为事件对象.

     下面我们来看dispatch方法，该方法接受传入的event参数，并对绑定在元素上的事件进行处理：例如我们代码如下

<div class='parent' style='width:900px;height:500px;background-color:#CCC'>
   <p class='child'>
     <a class='inner'>点击</a>
   </p>
</div>
<script>
$('.parent').on('click',function(){
    
})
$('.parent').on('click','.child',function(){
    
})
$('.parent').on('click','.inner',function(){
    
})
</script>

     可以看到，div元素本身绑定有click事件，同时又代理子元素p和a的事件，这样当在div发生点击事件的时候，第一步dispatch会从事件元素的currentTarget开始往上循环遍历直到div元素，将需要触发事件的元素及事件加到handlerQueue数组中 （前提是元素本身有代理事件），  然后会将绑定在元素本身的事件添加到handlerQueue。经过上面两步的处理，handlerQueue就形成一个需要触发事件的集合，通过这个集合，我们便能正确的响应事件。

dispatch: function( event ) {
    // Make a writable jQuery.Event from the native event object
    // 通过fix方法对event进行兼容性处理
    event = jQuery.event.fix( event || window.event );

    var i, j, cur, ret, selMatch, matched, matches, handleObj, sel, related,
        handlers = ( (jQuery._data( this, "events" ) || {} )[ event.type ] || []),
        delegateCount = handlers.delegateCount,
        args = core_slice.call( arguments ),
        run_all = !event.exclusive && !event.namespace,
        special = jQuery.event.special[ event.type ] || {},
        handlerQueue = [];

    // Use the fix-ed jQuery.Event rather than the (read-only) native event
    args[0] = event;
    event.delegateTarget = this;

    // Call the preDispatch hook for the mapped type, and let it bail if desired
    if ( special.preDispatch && special.preDispatch.call( this, event ) === false ) {
        return;
    }

    // Determine handlers that should run if there are delegated events
    // Avoid non-left-click bubbling in Firefox (#3861)
    
    
    //火狐右键会触发click事件，但是event.button值为2
    //delegateCount不为0代表元素本身有代理其他元素事件
    if ( delegateCount && !(event.button && event.type === "click") ) {
        /*事件从event.target冒泡到当前元素
        #  例如元素本身绑定有事件a，而且代理其子元素child事件b及child子元素c事件，
        #  则点击c元素时，执行事件顺序为c- b- a，即节点层次越深，事件执行优先级越高
        */
        for ( cur = event.target; cur != this; cur = cur.parentNode || this ) {

            // Don't process clicks (ONLY) on disabled elements (#6911, #8165, #11382, #11764)
            if ( cur.disabled !== true || event.type !== "click" ) {
                selMatch = {};
                matches = [];
                //代理事件,delegateCount为代理事件的数量，不同handler事件的顺序见上图中右图，代理事件在上，自身事件在下
                for ( i = 0; i < delegateCount; i++ ) {  
                    handleObj = handlers[ i ];
                    sel = handleObj.selector;
                    if ( selMatch[ sel ] === undefined ) {
                        selMatch[ sel ] = handleObj.needsContext ?
                            jQuery( sel, this ).index( cur ) >= 0 :
                            jQuery.find( sel, this, null, [ cur ] ).length;
                    }
                    if ( selMatch[ sel ] ) {
                        matches.push( handleObj );
                    }
                }
                if ( matches.length ) {
                    handlerQueue.push({ elem: cur, matches: matches });  //委托事件
                }
            }
        }
    }

    // Add the remaining (directly-bound) handlers
    if ( handlers.length > delegateCount ) {
        //自身事件
        handlerQueue.push({ elem: this, matches: handlers.slice( delegateCount ) });
    }

    // Run delegates first; they may want to stop propagation beneath us
    // hangdlerQueue是一个集合元素自身事件及代理子元素事件的数组
    // 例如 html结构为 <div><p><a></a></p></div>,当点击范围在p同时不在a内时，则会执行p和div的事件，
    // 相对应的handlerQuesu中并不包含a
    for ( i = 0; i < handlerQueue.length && !event.isPropagationStopped(); i++ ) {
        matched = handlerQueue[ i ];
        event.currentTarget = matched.elem;

        for ( j = 0; j < matched.matches.length && !event.isImmediatePropagationStopped(); j++ ) {
            handleObj = matched.matches[ j ];

            // Triggered event must either 1) be non-exclusive and have no namespace, or
            // 2) have namespace(s) a subset or equal to those in the bound event (both can have no namespace).
            if ( run_all || (!event.namespace && !handleObj.namespace) || event.namespace_re && event.namespace_re.test( handleObj.namespace ) ) {

                event.data = handleObj.data;
                event.handleObj = handleObj;
                ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler )
                        .apply( matched.elem, args );

                if ( ret !== undefined ) {
                    event.result = ret;
                    if ( ret === false ) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                }
            }
        }
    }

    // Call the postDispatch hook for the mapped type
    if ( special.postDispatch ) {
        special.postDispatch.call( this, event );
    }

    return event.result;
},

     

      具体如上所示，源码都做了相应备注，其中handlerQueue结构如下，前两项为代理事件，最后一项为元素本身事件，matches为当前元素handler集合。

 

      其中fix函数用于对事件对象的修正，首先构建一个新的可扩展的event对象，在jquery.event中还包含props，fixHooks，keyHooks,mouseHooks，分别存储了事件对象的公共属性，键盘事件属性，鼠标事件属性等，根据事件类型为新构建event对象赋予新的属性，同时我们在后期扩展时也可为该event对象赋予自定义属性。

fix: function( event ) {
    if ( event[ jQuery.expando ] ) {
        return event;
    }

    // Create a writable copy of the event object and normalize some properties
    var i, prop,
        originalEvent = event,
        fixHook = jQuery.event.fixHooks[ event.type ] || {},
        copy = fixHook.props ? this.props.concat( fixHook.props ) : this.props;

    event = jQuery.Event( originalEvent );

    for ( i = copy.length; i; ) {
        prop = copy[ --i ];
        event[ prop ] = originalEvent[ prop ];
    }

    // Fix target property, if necessary (#1925, IE 6/7/8 & Safari2)
    if ( !event.target ) {
        event.target = originalEvent.srcElement || document;
    }

    // Target should not be a text node (#504, Safari)
    if ( event.target.nodeType === 3 ) {
        event.target = event.target.parentNode;
    }

    // For mouse/key events, metaKey==false if it's undefined (#3368, #11328; IE6/7/8)
    event.metaKey = !!event.metaKey;

    return fixHook.filter? fixHook.filter( event, originalEvent ) : event;
},

    

     当然jquery.event还有trigger，remove，simulate等其他方法，在此就不一一列举，基本思路都是一致的。对以上原理理解透了，就可以自己根据需要来扩展jquery方法，如mousewheel事件，我们可以利用fix方法来完成对event对象的扩展，而不用自己重新写一套兼容性的代码，具体下节再分析。

     文中如有错误及不当之处，请及时指出，谢谢！ 

     文中所用jquery版本为1.8.3。1.2.6版本的jquery事件核心更容易理解。当然里面缺少事件代理的处理。