jQuery源码分析之jQuery.event.fix方法五问

问题1：如何调用jQuery.event.fix方法?

		event = jQuery.event.fix( event );//回调函数触发的时候会传入一个JS的event对象

问题2：那些属性是键盘事件和鼠标事件共有的属性?

  props: "altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" ")

问题3：键盘事件有那些特有的属性?

keyHooks: {
		props: "char charCode key keyCode".split(" "),
		filter: function( event, original ) {//event为jQuery.Event对象
			// Add which for key events
			if ( event.which == null ) {
				event.which = original.charCode != null ? original.charCode : original.keyCode;
				//如果event的which是空，那么默认用charCode，如果charCode不存在用keyCode!
			}

			return event;
		}
	}

问题4：鼠标事件有那些专有属性?

	mouseHooks: {
		props: "button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),
		filter: function( event, original ) {
			var body, eventDoc, doc,
				button = original.button,//表示点击的事件
				fromElement = original.fromElement;//表示fromElement
			// Calculate pageX/Y if missing and clientX/Y available
			if ( event.pageX == null && original.clientX != null ) {
				eventDoc = event.target.ownerDocument || document;
				doc = eventDoc.documentElement;//这是HTML元素
				body = eventDoc.body;//body元素
event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 );
event.pageY = original.clientY + ( doc && doc.scrollTop  || body && body.scrollTop  || 0 ) - ( doc && doc.clientTop  || body && body.clientTop  || 0 );
			}
			// Add relatedTarget, if necessary
			if ( !event.relatedTarget && fromElement ) {
				event.relatedTarget = fromElement === event.target ? original.toElement : fromElement;
			}//IE使用了event.fromElement!
			// Add which for click: 1 === left; 2 === middle; 3 === right
			// Note: button is not normalized, so don't use it
			if ( !event.which && button !== undefined ) {//不建议使用button属性
				event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) );
			}
			return event;
		}
	}

问题5：如何获取元素在页面中的位置，也就是pageX,pageY等属性?

event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 );
event.pageY = original.clientY + ( doc && doc.scrollTop  || body && body.scrollTop  || 0 ) - ( doc && doc.clientTop  || body && body.clientTop  || 0 );

我们必须知道jQuery在获取pageX，pageY的时候减去了body或者documentElement元素的clientLeft和clientTop!
问题6：怎么知道用户按住了那一个电脑按键?

	if ( event.which == null ) {
				event.which = original.charCode != null ? original.charCode : original.keyCode;
				//如果event的which是空，那么默认用charCode，如果charCode不存在用keyCode!
			}

默认获取charCode，如果charCode不存在才获取keyCode，如果需要把按键转化为字符，用

     String.fromCharCode(e.which)//e.which是鼠标和键盘公用的事件属性!

jQuery.event.fix源码

fix: function( event ) {
		//如果是通过jQuery.Event构造函数来完成的，那么event对象是有仓库的!
		if ( event[ jQuery.expando ] ) {
			return event;
		}
		// Create a writable copy of the event object and normalize some properties
		var i, prop, copy,
			type = event.type,//获取JS对象的事件类型
			originalEvent = event,//originalEvent保存JS的事件对象
			fixHook = this.fixHooks[ type ];
          //如果该类型的fixHook不存在，那么我们自己设置fixHook，如果是鼠标事件设置为mouseHooks
		  //如果是键盘事件设置为keyHooks！
		  //rmouseEvent = /^(?:mouse|pointer|contextmenu)|click/,
          //rkeyEvent = /^key/
		if ( !fixHook ) {
			this.fixHooks[ type ] = fixHook =
				rmouseEvent.test( type ) ? this.mouseHooks :
				rkeyEvent.test( type ) ? this.keyHooks :
				{};
		}
		//props是所有的事件对象都具有的属性，如果是鼠标事件那么把鼠标事件和他合并，否则就是键盘事件属性合并!
		copy = fixHook.props ? this.props.concat( fixHook.props ) : this.props;
       //创建jQuery.Event对象
		event = new jQuery.Event( originalEvent );
		i = copy.length;
		//为jQuery.Event对象赋值
		while ( i-- ) {
			prop = copy[ i ];
			event[ prop ] = originalEvent[ prop ];
		}
		// Support: IE<9
		// Fix target property (#1925)
		//设置target属性
		if ( !event.target ) {
			event.target = originalEvent.srcElement || document;
		}
		// Support: Chrome 23+, Safari?
		// Target should not be a text node (#504, #13143)
		//如果target是文本节点，那么获取文本节点的父元素!
		if ( event.target.nodeType === 3 ) {
			event.target = event.target.parentNode;
		}
		// Support: IE<9
		// For mouse/key events, metaKey==false if it's undefined (#3368, #11328)
		event.metaKey = !!event.metaKey;
        //用keyHooks或者mouseHooks来过滤event对象!
		return fixHook.filter ? fixHook.filter( event, originalEvent ) : event;
	}