因为原生的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属性。
加油!