第二十六课：jQuery对事件对象的修复

因为原生的event对象，在不同浏览器下，有不同的属性和方法，因此需要用jQuery进行兼容。

jQuery在这里分两步走，首先创建一个伪事件类jQuery.Event（jQuery里面自定义的事件类），这个事件类会统一处理事件对象的兼容性问题，比如：stopPropagation，preventDefault方法。然后通过jQuery.event.fix方法，针对不同的事件类型修复特定的属性。比如：mousewheel，keydown等事件类型。

jQuery.Event = function(src, props){

　　if(!(this instanceof jQuery.Event)){  //如果不是new jQuery.Event()，就返回一个new出来的jQuery.Event对象

　　　　return new jQuery.Event(src,props);

　　}

　　if(src && src.type){   //如果传进来的src有type属性，也就是event对象

　　　　this.originalEvent = src; //存储原始事件，也就是event事件对象

　　　　this.type = src.type;

　　　　this.isDefaultPrevented = (src.defaultPrevented || src.returnValue === false ||src.getPregentDefault && src.getPreventDefault()) ? returntrue : return false;    //如果传进来的event对象是阻止默认事件的，那么自定义事件(jQuery.Event)的isDefaultPrevented 属性为returntrue。

　　}

　　else{     //如果传进来的src没有type属性，也就是不是event对象而是事件类型，比如click，就把src当做此事件的type属性值，也就是这个事件类的事件类型就是src

　　　　this.type = src;

　　}

　　if(props){

　　　　jQuery.extend(this,props);   //如果传入了一个对象，就复制它的属性到自定义事件对象中。

　　}

　　this.timeStamp = src && src.timeStamp || jQuery.now(); //有些浏览器下，事件对象有timeStamp属性，没有的，就用now方法，得到当前日期的毫秒数

　　this[jQuery.expando] = true;    //标识这个自定义事件对象已经修正过

}

jQuery.Event.prototype = {

　　preventDefault : function(){

　　　　this.isDefaultPrevented = returnTrue;

　　　　var e = this.originalEvent;

　　　　if(!e){    //如果传入的不是event对象，就没有阻止事件默认行为。

　　　　　　return;

　　　　}

　　　　if(e.preventDefault){

　　　　　　e.preventDefault();

　　　　}else{

　　　　　　e.returnValue = false;  //   IE下阻止事件默认行为的代码

　　　　}

　　},　

　　stopPropagation: function(){

　　　　this.isPropagationStopped = returnTrue;

　　　　var e = this.originalEvent;

　　　　if(!e){    //如果传入的不是event对象，就不用阻止冒泡行为。

　　　　　　return;

　　　　}

　　　　if(e.stopPropagation){

　　　　　　e.stopPropagation();

　　　　}

　　　　e.cancelBubble= true;  //   IE下阻止事件冒泡的代码

　　},

　　stopImmediatePropagation: function(){

　　　　this.isImmediatePropagationStopped = returnTrue;

　　　　this.stopPropagation();

　　},

　　isDefaultPrevented : returnFalse,

　　isPropagationStopped  : returnFalse,

　　isImmediatePropagationStopped : returnFalse

}

jQuery.event.fix也很简单，它把大部分逻辑分担给其他钩子对象了，比如：mouseHooks处理mouse事件对象的不同属性，keyHooks处理键盘事件对象的不同属性。

fix = function(event){

　　if(event[jQuery.expando]){  //如果事件对象已经修正了，那么就直接返回。

　　　　return event;

　　}

　　var i,prop,originalEvent = event,fixHook = jQuery.event.fixHooks[event.type] || {},  //查找此事件类型是否有相对应的钩子对象。

　　　　copy = fixHook.props ? this.props.concat(fixHooks.props) : this.props;  //如果此钩子对象有相应的属性集合，就把这些属性集合合并到当前this.props属性集合中

　　event = jQuery.Event(originalEvent);   //得到jQuery自定义事件对象

　　for(i=copy.length;i;){

　　　　prop = copy[--i];  //得到此事件对象的属性名

　　　　event[prop] = originalEvent[prop]; //把原始对象的属性值赋给此jQuery事件对象的属性名

　　}

　  if(!event.target){   //IE6-8下是srcElement

　　　　event.target = originalEvent.srcElement || document;

　　}

　　if(event.target.nodeType === 3){    //文本节点不能作为事件目标元素，在火狐和safari下

　　　　event.target = event.target.parentNode;

　　}

　　event.metaKey = !!event.metaKey;//metaKey事件属性可返回一个布尔值，指示当事件发生时，"meta" 键是否被按下并保持住。大多数键盘上并不存在Meta键，该键存在于MIT计算机、Mac计算机或Sun公司的一些计算机键盘上。IE6-8下不支持。

　　return fixHook.filter ? fixHook.filter(event,originalEvent) : event; //此事件相对应的钩子对象是否有filter方法，如果有就证明此事件对象需要进行修复处理。因此执行钩子对象的filter方法修复事件对象，然后返回这个修复后的event。

}

jQuery只修复了键盘事件和鼠标事件。

键盘事件的重点在于修复keyCode，不过W3C已经规定which才是标准属性，因此兼容性写法是：

if(event.which == null){  //如果不支持W3C的which属性。就进行修复。

　　event.which = event.charCode !=null ? event.charCode : event.keyCode;   //先取事件对象的charCode属性值，如果这属性值不存在，就取event的keyCode属性值

}

鼠标事件的重点是修复pageX/pageY，relatedTarget与用于左中右键的which属性。

clientX clientY 为事件触发时鼠标在当前浏览器可视区的坐标

screenX screenY 为事件触发时鼠标在屏幕的坐标

pageX pageY 为事件触发时鼠标在整个document的坐标，IE6-8不支持。

offsetX offsetY 为事件触发时鼠标在事件源元素的坐标，不过元素的区域有很多计算方式，按规范来说，参考点是padding围成的区域（不包括滚动条和边框）的左上角。

layerX layerY 为事件发生时鼠标相当于事件源元素的offsetParent的坐标，IE6-8不支持。

x y 是IE的layerX,layerY。但是IE6-8的offsetParent存在bug，比如td元素的offsetParent总是table，不推荐使用这两个属性。

我们修复IE6-8下的pageX和pageY：

e.pageX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);

e.pageY = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop);

IE兼容模式下，窗口滚动条是出现在body中的，标准模式下，窗口滚动条出现在html。webkit下，窗口滚动条出现在body中，火狐和Opera的滚动条在html中。当窗口滚动条出现在body中时，document.body.scrollLeft是我们想要的值，而document.documentElement.scrollLeft为0，反之亦然。

在IE6-7标准模式以及IE全系列的怪异模式下，页面左上角存在2px的偏移值(表现在document.body.clientLeft,document.body.clientTop)，这会导致我们在IE下取到的pageX和pageY比其他的浏览器大2px。

在IE下触发标准模式很简单，使用<!DOCTYPE HTML>在页面最前面就行了，它的前面不能有任何字符。切换成怪异模式有以下几种方法：

（1）在最前面加上非法的标签，如<ddd></ddd>

（2）在最前面加上一段文本，如ddddddd

（3）在IE6下，在最前面加上XML声明，如：<?xml version="1.0" encoding="utf-8"?>。

一般使用第一个方案。

IE在怪异模式下，页面显示用的顶级容器是body，2px 的偏移在body中表现，我们可以通过在body{ border:0}，消除这个2px的偏移量。而且也可以使用html{border:0}消除。意思就是在怪异模式下，IE可以通过在body或html中设置boder:0消除2px的偏移。

那么，标准模式下，IE6-7呢？标准模式下，IE6可以通过以上方式消除2px的偏移，但是IE7不行，所以要兼容所有浏览器，就不能使用修改样式的方式。因此完美方案：

if(event.pageX ==null && event.clientX !=null){   //处理鼠标事件的

　　var doc = event.target.ownerDocument || document;

　　var box = document.compatMode == "BackCompat" ? doc.body : doc.documentElement; //文档模式是怪异模式，就使用body

　　event.pageX = event.clientX + (box && box.scrollLeft || 0) - (box && box.clientLeft || 0);

　　event.pageY = event.clientY + (box && box.scrollTop || 0) - (box && box.clientTop || 0);

}

如果不是html文档，而是xml或svg文档，就没有scrollLeft和clientLeft属性。

加油！