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的绑定函数原理先介绍到这里。下次继续！一天一点，滴水汇河！