读Ext之八（原生事件对象的修复及扩充）
Ext库也对浏览器原生的事件对象做了包装，以保证兼容所有浏览器。
这里 列举了浏览器原生事件对象各浏览器中兼容性，这里 列出了各种情况下事件对象的获取。
在Ext事件管理类 Ext.EventManager 中会悄悄的将浏览器原始事件对象进行转换
e = Ext.EventObject.setEvent(e);
Ext.EventObject 即为包装后的事件对象(暂称为Ext事件对象)。先从全局上看看该对象的实现，其中...省略了部分代码。
Ext.EventObject = function(){
var E = Ext.lib.Event,
...;
Ext.EventObjectImpl = function(e){
if(e){
this.setEvent(e.browserEvent || e);
}
};
Ext.EventObjectImpl.prototype = {
/** @private */
setEvent : function(e){
var me = this;
...
},
...
};
return new Ext.EventObjectImpl();
}();
可看到匿名函数执行后返回了Ext.EventObjectImpl的实例对象，该对象才是真正的Ext.EventObject。
这一点和jQuery类似，jQuery中是new了一个Event类。
第一句
var E = Ext.lib.Event,
变量E暂存了Ext.lib.Event对象，该对象在 读Ext之四 中已经介绍了。后面的很多方法都要用 E 来实现。
第二个变量 safariKeys 为一个对象，
// safari keypress events for special keys return bad keycodes
safariKeys = {
3 : 13, // enter
63234 : 37, // left
63235 : 39, // right
63232 : 38, // up
63233 : 40, // down
63276 : 33, // page up
63277 : 34, // page down
63272 : 46, // delete
63273 : 36, // home
63275 : 35 // end
},
注释说是为了修复Safari中keypress事件返回错误的键码。但我用Safari 5.0.3测试input，document.body 。
回车键(enter)返回的是13，正确的。方向键(left等)和翻页键(page up等)则不会触发。
测试代码如下
var inp = document.getElementById('txt');
inp.onkeypress = function(e){
e = window.event || e;
alert(e.keyCode);
}
document.body.onkeypress = function(e){
e = window.event || e;
alert(e.keyCode);
}
之前已经提到过要获取按键值应该使用keydown或keyup事件。这里应该是为了兼容旧版本的Safari。
第三个变量是btnMap
// normalize button clicks
btnMap = Ext.isIE ? {1:0,4:1,2:2} :
(Ext.isWebKit ? {1:0,2:1,3:2} : {0:0,1:1,2:2});
用来统一鼠标按键值。这里 有详细分析，不重复了。经测试，webkit内核的Safari5和Chrome7在mousedown/mouseup事件中左，中，右键返回的是符合标准的0,1,2。因此这里对webkit的判断是可去掉的。
接下来是 Ext.EventObjectImpl 类的定义
Ext.EventObjectImpl = function(e){
if(e){
this.setEvent(e.browserEvent || e);
}
};
如果传了浏览器原生事件对象，则调用this.setEvent，this.setEvent是挂在Ext.EventObjectImpl的原型上的。原型上还有很多其它方法，逐个看
setEvent : function(e){
var me = this;
if(e == me || (e && e.browserEvent)){ // already wrapped
return e;
}
me.browserEvent = e;
if(e){
// normalize buttons
me.button = e.button ? btnMap[e.button] : (e.which ? e.which - 1 : -1);
if(e.type == 'click' && me.button == -1){
me.button = 0;
}
me.type = e.type;
me.shiftKey = e.shiftKey;
// mac metaKey behaves like ctrlKey
me.ctrlKey = e.ctrlKey || e.metaKey || false;
me.altKey = e.altKey;
// in getKey these will be normalized for the mac
me.keyCode = e.keyCode;
me.charCode = e.charCode;
// cache the target for the delayed and or buffered events
me.target = E.getTarget(e);
// same for XY
me.xy = E.getXY(e);
}else{
me.button = -1;
me.shiftKey = false;
me.ctrlKey = false;
me.altKey = false;
me.keyCode = 0;
me.charCode = 0;
me.target = null;
me.xy = [0, 0];
}
return me;
},
var me = this;
将this暂存到me上。接着判断所传的是否就是本身，如果是则不再包装直接返回。仅当是浏览器原生事件对象才进行包装。
me.browserEvent = e;
把浏览器原始事件对象挂在this上，即该类的字段browserEvent就是浏览器原始对象。因为有时会用到浏览器原始对象。
me.button = e.button ? btnMap[e.button] : (e.which ? e.which - 1 : -1);
先从btnMap中取，上面已经提到了。e.which原本是键盘事件，jQuery中将鼠标按键也存在e.which中，Ext这里是为了兼容jQuery。
if(e.type == 'click' && me.button == -1){
me.button = 0;
}
建议获取判断鼠标按下哪个键应该使用mousedown/mouseup事件，这里是为了兼容click事件。但有点问题，IE6/7/8中左键单击(click)事件为0，但中键和右键单击(click)则无法触发该事件。这里的实现欠妥。
me.type = e.type; me.shiftKey = e.shiftKey;
事件类型(如click)和shiftKey复制到this上。
接着是ctrlKey，altKey，keyCode，charCode。
接着是target，使用E.getTarget(e)获取。E.getTarget在第四篇提到了。
接着是xy，xy不是事件对象原有的属性。而是Ext自定义的。
setEvent说了，看stopEvent
stopEvent : function(){
var me = this;
if(me.browserEvent){
if(me.browserEvent.type == 'mousedown'){
Ext.EventManager.stoppedMouseDownEvent.fire(me);
}
E.stopEvent(me.browserEvent);
}
},
用来停止事件冒泡，阻止元素默认行为。
有两点，其一对mousedown事件做了特殊处理Ext.EventManager.stoppedMouseDownEvent 实际是Ext.util.Event类的一个实例对象。如
pub.stoppedMouseDownEvent = new Ext.util.Event();
后续有一篇会读到该类。
其二，调用了E.stopEvent(me.browserEvent)，这里的E即为Ext.lib.Event对象，第四篇提到了。接着是preventDefault，stopPropagation等
preventDefault : function(){
if(this.browserEvent){
E.preventDefault(this.browserEvent);
}
},
stopPropagation : function(){
var me = this;
if(me.browserEvent){
if(me.browserEvent.type == 'mousedown'){
Ext.EventManager.stoppedMouseDownEvent.fire(me);
}
E.stopPropagation(me.browserEvent);
}
},
可看到都是调用E(Ext.lib.Event)来实现的，不再重复。
getTarget 采用事件代理时会用到，实现上用到了Ext.fly等，后续提到。getWheelDelta 用来获取滚轮的速度
getWheelDelta : function(){
var e = this.browserEvent;
var delta = 0;
if(e.wheelDelta){ /* IE/Opera. */
delta = e.wheelDelta/120;
}else if(e.detail){ /* Mozilla case. */
delta = -e.detail/3;
}
return delta;
},
IE/Safari/Chrome/Opera中使用事件对象的wheelDelta属性，Firefox则使用detail属性。
属性的方向值也不一样，IE向前滚 > 0为120，相反在-120，Firefox向后滚 > 0为3，相反则-3。
好了，整个Ext事件对象读完了。可以看到Ext为了保证兼容，统一对原生事件对象做了修复，扩充等。
