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为了保证兼容,统一对原生事件目标做了修复,扩充等。

 

EventManager.js

 

相关文章

网站地图xml地图