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