ExtJs源码分析与学习—ExtJs事件机制（二）
在ExtJs源码分析与学习—ExtJs事件机制（一）中分析了ExtJs对原生浏览器事件的封装。这篇进一步分析ExtJs对事件的封装和扩充。ExtJs会对浏览器本身的事件进行转换，是通过类Ext.EventObject来实现的，该类中通过自执行匿名函数返回Ext.EventObjectImpl对象，该对象用到了Ext.lib.Event（对原生浏览器事件的扩展）。
Ext.EventObject = function(){
var E = Ext.lib.Event,
…
Ext.EventObjectImpl = function(e){
if(e){
this.setEvent(e.browserEvent || e);
}
};
Ext.EventObjectImpl.prototype = {
…
};
return new Ext.EventObjectImpl();
}();
下面看Ext.EventObject中代码的实现
// 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浏览器对部分键的按键事件返回值的处理，与其他浏览器的统一。
// normalize button clicks
btnMap = Ext.isIE ? {1:0,4:1,2:2} : {0:0,1:1,2:2};
由于IE浏览器与其他浏览器的按键值（e.button）不同，所以定义该对象是为了实现所有浏览器的兼容。兼容后，0为左键，1为中键，2为右键。
接下来是类Ext.EventObjectImpl的定义
Ext.EventObjectImpl = function(e){
if(e){
this.setEvent(e.browserEvent || e);
}
};
该类中对浏览器原生事件e进行了包装，调用了private method setEvent，setEvent是定义在Ext.EventObjectImpl.prototype下的
/** @private */
setEvent : function(e){
var me = this;
if(e == me || (e && e.browserEvent)){ // already wrapped
return e;
}
me.browserEvent = e;//把浏览器的原始事件保存到browserEvent中，可以作为是否包装的标识
if(e){
// normalize buttons
//该段代码处理了不同按键返回的e.button
me.button = e.button ? btnMap[e.button] : (e.which ? e.which - 1 : -1);//e.which原本是键盘事件
if(clickRe.test(e.type) && 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;
//键盘事件的keywode,and charcode
// 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
//事件目标，E.getTarget(e)处理了不同浏览器的返回结果
me.target = E.getTarget(e);
// same for XY
me.xy = E.getXY(e);//Ext自定义的坐标属性
}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;
},
该方法首先判断事件是否包装过，如已经包装了，则直接返回该包装的事件。
me.browserEvent = e;//把浏览器的原始事件保存到browserEvent中
me.button = e.button ? btnMap[e.button] : (e.which ? e.which - 1 : -1);//e.which原本是键盘事件
if(clickRe.test(e.type) && me.button == -1){
me.button = 0;
}
该段代码处理了不同按键返回不同的e.button
其他代码的功能，可参见代码注释
接着看stopEvent方法
stopEvent : function(){
var me = this;
if(me.browserEvent){
if(me.browserEvent.type == 'mousedown'){
Ext.EventManager.stoppedMouseDownEvent.fire(me);
}
E.stopEvent(me.browserEvent);
}
},
停止事件（preventDefault和stopPropagation）。用来停止事件冒泡，阻止元素默认行为。需要说明的是对mousedown事件做了特殊处理Ext.EventManager.stoppedMouseDownEvent 实际是Ext.util.Event类的一个实例对象。如pub.stoppedMouseDownEvent = new Ext.util.Event();后续讲到Ext.EventManager时，会讲fire方法。
/**
* Prevents the browsers default handling of the event.
*/
preventDefault : function(){
if(this.browserEvent){
E.preventDefault(this.browserEvent);
}
},
/**
* Cancels bubbling of the event.
*/
stopPropagation : function(){
var me = this;
if(me.browserEvent){
if(me.browserEvent.type == 'mousedown'){
Ext.EventManager.stoppedMouseDownEvent.fire(me);
}
E.stopPropagation(me.browserEvent);
}
},
对preventDefault（阻止浏览器默认行为处理事件）和stopPropagation（取消事件冒泡）在该类中的实现，实际上还是调用Ext.lib.Event中的原生方法
接着看其他代码
/**
* 返回该事件键盘字符代码
* Gets the character code for the event.
* @return {Number} 键盘代码
*/
getCharCode : function(){
return this.charCode || this.keyCode;
},
/**
* 返回一个常规化的事件键盘代码，对Safari进行了特殊处理
* Returns a normalized keyCode for the event.
* @return {Number} The key code
*/
getKey : function(){
var k = this.keyCode || this.charCode;
return Ext.isSafari ? (safariKeys[k] || k) : k;
},
/**
* 获取事件X坐标。
* Gets the x coordinate of the event.
* @return {Number}
*/
getPageX : function(){
return this.xy[0];
},
/**
* 获取事件Y坐标。
* Gets the y coordinate of the event.
* @return {Number}
*/
getPageY : function(){
return this.xy[1];
},
/**
* 获取事件的时间。
* Gets the time of the event.
* @return {Number}
*/
getTime : function(){
if(this.browserEvent){
return E.getTime(this.browserEvent);
}
return null;
},
/**
* 获取事件的页面坐标。
* Gets the page coordinates of the event.
* @return {Array} xy值，格式[x, y]。The xy values like [x, y]
*/
getXY : function(){
return this.xy;
},
/**
* 获取事件的目标对象。
* Gets the target for the event.
* @param {String} selector （可选的） 一个简易的选择符，用于筛选目标或查找目标的父级元素。(optional) A simple selector to filter the target or look for an ancestor of the target
* @param {Number/Mixed} maxDepth （可选的）搜索的最大深度（数字或是元素，默认为10||document.body）。(optional) The max depth to search as a number or element (defaults to 10 || document.body)
* @param {Boolean} returnEl （可选的） True表示为返回Ext.Element的对象而非DOM节点。(optional) True to return a Ext.Element object instead of DOM node
* @return {HTMLelement}
*/
getTarget : function(selector, maxDepth, returnEl){
return selector ? Ext.fly(this.target).findParent(selector, maxDepth, returnEl) : (returnEl ? Ext.get(this.target) : this.target);
},
/**
* 获取相关的目标对象。
* Gets the related target.
* @return {HTMLElement}
*/
getRelatedTarget : function(){
return this.browserEvent ? E.getRelatedTarget(this.browserEvent) : null;
},
/**
* 常规化鼠标滚轮的有限增量(速度)。
* IE/Safari/Chrome/Opera中使用事件对象的wheelDelta属性，Firefox则使用detail属性。
属性的方向值也不一样，IE向前滚 > 0为120，相反在-120，Firefox向后滚 > 0为3，相反则-3。
* Normalizes mouse wheel delta across browsers
* @return {Number} The delta
*/
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;
},
getTarget 方法用到了Ext.fly，一个关键的方法，利用共享模式实现的，后续待讲
下面看方法within
within : function(el, related, allowEl){
if(el){
var t = this[related ? "getRelatedTarget" : "getTarget"]();
return t && ((allowEl ? (t == Ext.getDom(el)) : false) || Ext.fly(el).contains(t));
}
return false;
}
如果该事件的目标对象是el的子元素，则返回true；如果allowEl设为true时，该事件的目标对象等于el也返回true。关于这个方法的理解，请看例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ext.EventObject.within method demo</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
href="../ext-3.3.1/resources/css/ext-all.css" />
<style type="text/css">
div {
border: 1px solid blue;
padding: 40px;
margin: 10px;
}
</style>
<script type="text/javascript"
src="../ext-3.3.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript"
src="../ext-3.3.1/ext-all-debug-w-comments.js"></script>
<script type="text/javascript"
src="../ext-3.3.1/src/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="../ext-3.3.1/src/debug.js"></script>
<!-- 调试脚本 -->
<script type="text/javascript">
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = '../ext-3.3.1/resources/images/default/s.gif';
Ext.QuickTips.init();
Ext.getBody().on('click', function(e){
if(e.within('some-el')){//如果该事件的目标对象是some-el的子元素，则返回true
alert('是在some-el的孩子节点上点击的!');
}else{
alert('你的点击不是some-el的孩子节点');
}
});
Ext.getBody().on('click', function(e,t){
if((t.id == 'some-el') && !e.within(t, true)){//如果allowEl设为true时，该事件的目标对象等于el也返回true
alert('直接在some-el上点击了鼠标!');
}
});
});
</script>
</head>
<body>
<div id="some-el">
<div id="some-el2">
Ext.EventObject.within demo
</div>
</div>
<br/>
<div id="some-el3">
<div id="some-el4">
不是some-el节点
</div>
</div>
</body>
</html>
以上介绍了Ext事件 Ext.EventObject 对浏览器原生事件的包装和扩展，实现了个浏览器之间的兼容。