jQuery事件处理（一）

1、jQuery事件绑定的用法：

$( "elem" ).on( events, [selector], [data], handler );

events:事件名称，可以是自定义事件名称

selector:选择器

data:事件触发时传递给事件处理函数

handler:事件处理函数

2、on方法源码分析

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

　　// 如果types是对象，则说明是传入了多个事件
　　if ( typeof types === "object" ) {
　　　　// 如果selector不是string，则说明用户没有传入selector
　　　　if ( typeof selector !== "string" ) {
　　　　　　// 把selector赋值给data
　　　　　　data = data || selector;

　　　　　　// selector置为undefined
　　　　　　selector = undefined;
　　　　}

　　　　// 遍历types对象中的每一个元素，并递归调用自身
　　　　for ( type in types ) {
　　　　　　this.on( type, selector, data, types[ type ], one );
　　　　}
　　　　return this;
　　}

　　// 如果data和fn都为null，说明用户只传了前两个参数

　　if ( data == null && fn == null ) {
　　　　// 把selector（第二个参数）赋值给fn
　　　　fn = selector;

　　　　// data和selector置为undefined
　　　　data = selector = undefined;

　　// 如果fn为null，说明用户传了三个参数
　　} else if ( fn == null ) {

　　　　// 如果selector的类型是string，说明用户没传data
　　　　if ( typeof selector === "string" ) {
　　　　　　// 把data赋值给fn
　　　　　　fn = data;

　　　　　　// 把data置为undefined
　　　　　　data = undefined;
　　　　} else {
　　　　　　// 否则的话，说明用户没传selector，而是传了data，将data赋值给fn

　　　　　　fn = data;

　　　　　　// 将selector赋值给data
　　　　　　data = selector;

　　　　　　// 将selector置为undefined
　　　　　　selector = undefined;
　　　　}
　　}

　　// 如果用户传入的事件处理函数是false值，则将事件处理函数赋值为jQuery内部的returnFalse函数
　　if ( fn === false ) {
　　　　fn = returnFalse;

　　// 如果用户没传回调函数，返回this，this是啥？返回this干嘛？
　　} else if ( !fn ) {
　　　　return this;
　　}

　　// 如果one为1，内部用，暂时没看到用途

　　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++ );
　　}

　　// 遍历this对象，调用jQueryevent对象的add方法处理事件
　　return this.each( function() {
　　　　jQuery.event.add( this, types, fn, data, selector );
　　});
},

通过分析on方法的源码发现，on方法并没有处理事件相关的任何事情，只是对用户传入的参数进行调整，真正处理事件的是event对象

3、首先看看event对象的构造函数都做了什么

jQuery.Event = function( src, props ) {
　　// 余老板的suggest组件中也用到了这种方法

　　// 检测this是不是Event对象，如果不是，new一个Event对象出来，这样就避免了外部new对象
　　if ( !(this instanceof jQuery.Event) ) {
　　　　return new jQuery.Event( src, props );
　　}

　　// 如果有src，并且src有type属性
　　if ( src && src.type ) {

　　　　// 定义originalEvent属性并将src赋值给它
　　　　this.originalEvent = src;

　　　　// 定义type属性，并将src.type赋值给它
　　　　this.type = src.type;

　　　　// 定义isDefaultPrevented属性并通过判断事件被阻止冒泡为其赋值
　　　　this.isDefaultPrevented = ( src.defaultPrevented ||
　　　　　　src.getPreventDefault && src.getPreventDefault() ) ? returnTrue : returnFalse;

　　// 否则，将src赋值给type
　　} else {
　　　　this.type = src;
　　}

　　// 如果用户传入props，则扩展Event或者覆盖原有的属性
　　if ( props ) {
　　　　jQuery.extend( this, props );
　　}

　　// 创建一个时间戳？？
　　this.timeStamp = src && src.timeStamp || jQuery.now();

　　// 给这个Event对象一个标记
　　this[ jQuery.expando ] = true;
};

看event对象的构造函数发现，构造函数做了一些初始化操作。在看一下event对象封装的一些方法。

4、jQuery的event对象

　　jQuery的event对象提供了如下方法和属性：

　　　　{

　　　　　　add : function(){},

　　　　　　remove : function(){},

　　　　　　trigger : function(){},

　　　　　　dispatch : function(){},

　　　　　　handlers : function(){},

　　　　　　fix: function(){},

　　　　　　simulate : function(){},

　　　　　　global : {},

　　　　　　props : {},

　　　　　　fixHooks : {},

　　　　　　keyHooks : {},

　　　　　　mouseHooks : {},

　　　　　　special : {}

　　　　}

　　首先看add方法：

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

　　　　var handleObjIn, eventHandle, tmp,
　　　　　　events, t, handleObj,
　　　　　　special, handlers, type, namespaces, origType,
　　　　　　elemData = data_priv.get( elem );

　　　　// 涉及到jQuery的另外一个大的方面：缓存机制。或许我应该先看缓存机制的。。。

　　　　// 不为text、comment节点绑定数据，直接返回
　　　　if ( !elemData ) {
　　　　　　return;
　　　　}

　　　　// 如果handler是一个有handler属性或方法的对象，则进行一些转移赋值操作
　　　　if ( handler.handler ) {
　　　　　　handleObjIn = handler;
　　　　　　handler = handleObjIn.handler;
　　　　　　selector = handleObjIn.selector;
　　　　}

　　　　// 检查handler是否有一个唯一的id，方便之后查找和删除
　　　　if ( !handler.guid ) {

　　　　　　// 如果没有就为其设定一个唯一id
　　　　　　handler.guid = jQuery.guid++;
　　　　}

　　　　// 如果elemData中没有events对象，则为其定义events属性并赋值为空对象
　　　　if ( !(events = elemData.events) ) {
　　　　　　events = elemData.events = {};
　　　　}

　　　　// 如果elemData中没有handle对象
　　　　if ( !(eventHandle = elemData.handle) ) {

　　　　　　// 为elemData定义一个handle方法（事件处理函数）
　　　　　　eventHandle = elemData.handle = function( e ) {
　　　　　　　　// 有点迷糊。。。
　　　　　　　　return typeof jQuery !== core_strundefined && (!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;
　　　　}

　　　　// 处理types中传入的是通过空格分割的多个事件的情况
　　　　types = ( types || "" ).match( core_rnotwhite ) || [""];
　　　　　　t = types.length;
　　　　　　while ( t-- ) {
　　　　　　　　tmp = rtypenamespace.exec( types[t] ) || [];
　　　　　　　　type = origType = tmp[1];
　　　　　　　　namespaces = ( tmp[2] || "" ).split( "." ).sort();

　　　　　　　　if ( !type ) {
　　　　　　　　　　continue;
　　　　　　}

　　　　　　// 事件是否会改变当前状态，如果是则使用特殊事件，看event的special属性。。。
　　　　　　special = jQuery.event.special[ type ] || {};

　　　　　　// 根据是否有selector判断使用哪种特殊事件（看完特殊事件再过来看这个地方）
　　　　　　type = ( selector ? special.delegateType : special.bindType ) || type;

　　　　　　// 根据新的type获取新的special
　　　　　　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 );

　　　　　　// 如果是第一次调用，初始化事件处理队列（将同一事件的处理函数放入数组中）
　　　　　　if ( !(handlers = events[ type ]) ) {
　　　　　　　　handlers = events[ type ] = [];
　　　　　　　　handlers.delegateCount = 0;

　　　　　　　　// 如果获取特殊事件监听方法失败，则使用addEventListener添加事件（抛弃attachEvent了吗？）
　　　　　　　　if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
　　　　　　　　　　if ( elem.addEventListener ) {
　　　　　　　　　　　　elem.addEventListener( type, eventHandle, false );
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}

　　　　　　// 使用special的add方法进行处理

　　　　　　if ( special.add ) {

　　　　　　　　// 添加事件
　　　　　　　　special.add.call( elem, handleObj );

　　　　　　　　// 设置handleObj中的handler属性的id

　　　　　　　　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;
　　　　}

　　　　// 将elem清空，等待回收，避免内存泄漏
　　　　elem = null;
　　},