跨浏览器的事件对象-------EventUtil 中的方法及用法

在JavaScript中,DOM0级、DOM2级与旧版本IE(8-)为对象添加事件的方法不同

为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即跨浏览器的事件处理程序

习惯上,这个方法属于一个名为EventUtil的对象

使用EventUtil 时,不能直接使用
EventUtil是需要自己封装的!!!!

以下,就是封装好的EventUtil 直接复制粘贴后,使用EventUtil就行

  var EventUtil={

addHandler:function(element,type,handler){ //添加事件
    if(element.addEventListener){
        element.addEventListener(type,handler,false);  //使用DOM2级方法添加事件
    }else if(element.attachEvent){                    //使用IE方法添加事件
        element.attachEvent("on"+type,handler);
    }else{
        element["on"+type]=handler;          //使用DOM0级方法添加事件
    }
},

removeHandler:function(element,type,handler){  //取消事件
    if(element.removeEventListener){
        element.removeEventListener(type,handler,false);
    }else if(element.detachEvent){
        element.detachEvent("on"+type,handler);
    }else{
        element["on"+type]=null;
    }
},

getEvent:function(event){  //使用这个方法跨浏览器取得event对象
    return event?event:window.event;
},

getTarget:function(event){  //返回事件的实际目标
    return event.target||event.srcElement;
},

preventDefault:function(event){   //阻止事件的默认行为
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue=false;
    }
},

stopPropagation:function(event){  //立即停止事件在DOM中的传播
    //避免触发注册在document.body上面的事件处理程序
    if(event.stopPropagation){
        event.stopPropagation();
    }else{
        event.cancelBubble=true;
    }
},

getRelatedTarget:function(event){  //获取mouseover和mouseout相关元素
    if(event.relatedTarget){
        return event.relatedTarget;
    }else if(event.toElement){      //兼容IE8-
        return event.toElement;
    }else if(event.formElement){
        return event.formElement;
    }else{
        return null;
    }
},

getButton:function(event){    //获取mousedown或mouseup按下或释放的按钮是鼠标中的哪一个
    if(document.implementation.hasFeature("MouseEvents","2.0")){
        return event.button;
    }else{
        switch(event.button){   //将IE模型下的button属性映射为DOM模型下的button属性
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
                return 0;  //按下的是鼠标主按钮(一般是左键)
            case 2:
            case 6:
                return 2;  //按下的是中间的鼠标按钮
            case 4:
                return 1;  //鼠标次按钮(一般是右键)
        }
    }
},

getWheelDelta:function(event){ //获取表示鼠标滚轮滚动方向的数值
    if(event.wheelDelta){
        return event.wheelDelta;
    }else{
        return -event.detail*40;
    }
},

getCharCode:function(event){   //以跨浏览器取得相同的字符编码,需在keypress事件中使用
    if(typeof event.charCode=="number"){
        return event.charCode;
    }else{
        return event.keyCode;
    }
}

};

EventUtil 有许多的好用方法

addHandler方法
这是EventUtil中最常用的方法,它的作用是为对象添加事件并保证兼容性

在添加了EventUtil后,可以如下“重点语句”所示获取event对象而无需担心上述差异导致的兼容问题

event=EventUtil.getEvent(event); //重点语句

在IE中和其它兼容DOM的浏览器中,获取事件目标(target)的方法不同

在IE中,获取事件目标对象的方法为event.srcElement

而在其它兼容DOM的浏览器中,获取事件目标对象的方法却为event.target

getTarget方法正是为了处理这个差异而存在

在添加了EventUtil后,可以如下“重点语句”所示获取事件的目标(target)对象而无需担心上述差异导致的兼容问题

var target=EventUtil.getTarget(event); //重点语句

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页