锁定老帖子 主题:读Ext之八(原生事件对象的修复及扩充)
精华帖 (0) :: 良好帖 (7) :: 新手帖 (0) :: 隐藏帖 (1)
|
|
---|---|
作者 | 正文 |
发表时间:2010-11-27
最后修改:2010-12-04
Ext库也对浏览器原生的事件对象做了包装,以保证兼容所有浏览器。 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。 var E = Ext.lib.Event,
变量E暂存了Ext.lib.Event对象,该对象在 读Ext之四
中已经介绍了。后面的很多方法都要用 E 来实现。 // 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 。 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。 // 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}); 用来统一鼠标按键值。这里
有详细分析,不重复了。 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上。接着判断所传的是否就是本身,如果是则不再包装直接返回。
setEvent说了,看stopEvent stopEvent : function(){ var me = this; if(me.browserEvent){ if(me.browserEvent.type == 'mousedown'){ Ext.EventManager.stoppedMouseDownEvent.fire(me); } E.stopEvent(me.browserEvent); } }, 用来停止事件冒泡,阻止元素默认行为。 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)来实现的,不再重复。 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属性。
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-12-10
讲得非常详细,正是我要找的资料!非常感谢分享!
|
|
返回顶楼 | |
浏览 2560 次