jQuery学习-事件之绑定事件（一）

我们都知道jQuery的事件其思想来源于Dean Edwards的addEvent,通过源码我们知道jQuery在为元素绑定事件时，每种类型的事件（click,blur）时只绑定了一次对应类型的事件处理方法，实际的方法是存在jQuery的缓存系统中的，这样做的好处我就不多说了，绑定方法的函数为add方法,在执行事件的时，通过handers在缓存系统中获取事件列表，然后通过dispatch函数来执行对应的事件。

jQuery.event = {

add: function( elem, types, handler, data, selector ) {
                var tmp, events, t, handleObjIn,
            special, eventHandle, handleObj,
            handlers, type, namespaces, origType,
            elemData = jQuery._data( elem );//从缓存系统中获取对应的事件数据

// 如果不存在事件数据则直接退出
        if ( !elemData ) {
            return;
        }

// Caller can pass in an object of custom data in lieu of the handler
        if ( handler.handler ) {
            handleObjIn = handler;
            handler = handleObjIn.handler;
            selector = handleObjIn.selector;
        }

// 为事件添加标识
        if ( !handler.guid ) {
            handler.guid = jQuery.guid++;
        }

//初始化事件对象数据
        if ( !(events = elemData.events) ) {
            events = elemData.events = {};
        }
                //每种事件类型只绑定一次事件（eventHanle）
        if ( !(eventHandle = elemData.handle) ) {
            eventHandle = elemData.handle = 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 !== strundefined && (!e || jQuery.event.triggered !== e.type) ?
                //通过dispatch来触发事件的执行，eventHandle.elem来绑定当前元素，防止this指向错误（attachEvent中this会指向window的bug）
                    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
        types = ( types || "" ).match( rnotwhite ) || [ "" ];
        t = types.length;
        while ( t-- ) {
            tmp = rtypenamespace.exec( types[t] ) || [];
            type = origType = tmp[1];
            namespaces = ( tmp[2] || "" ).split( "." ).sort();

// There *must* be a type, no attaching namespace-only handlers
            if ( !type ) {
                continue;
            }

// 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 = jQuery.extend({
                type: type,
                origType: origType,
                data: data,
                handler: handler,
                guid: handler.guid,
                selector: selector,
                needsContext: selector && jQuery.expr.match.needsContext.test( selector ),
                namespace: namespaces.join(".")
            }, handleObjIn );

//handlers对应事件类型的事件列表
            if ( !(handlers = events[ type ]) ) {
                handlers = events[ type ] = [];
                handlers.delegateCount = 0;

// Only use addEventListener/attachEvent if the special events handler returns false
                if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
                    //真正绑定事件的地方，只绑定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;
                }
            }

// 将事件加入事件列表中
            if ( selector ) {
                handlers.splice( handlers.delegateCount++, 0, handleObj );
            } else {
                handlers.push( handleObj );
            }

//表示事件曾经使用过，用于事件优化
            jQuery.event.global[ type ] = true;
        }

// 防止ie内存溢出
        elem = null;
     },
     remove: function( elem, types, handler, selector, mappedTypes ) {
          //为元素移除事件
     },
     trigger: function( event, data, elem, onlyHandlers ) {
         //执行事件
     },
     dispatch: function( event ) {
         //分配事件（在执行方法时执行）
     },
     handlers: function( event, handlers ) {
         //获取缓存系统中对应事件类型的事件列表
     }
}

//其实我们为每种事件绑定的方式是这样的
//通过dispatch来执行对应的事件
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 !== strundefined && (!e || jQuery.event.triggered !== e.type) ?
          jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
      undefined;
}

好了，jQuery的绑定函数原理先介绍到这里。下次继续！一天一点，滴水汇河！