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