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 keycodessafariKeys = { 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 对浏览器原生事件的包装和扩展，实现了个浏览器之间的兼容。