JavaScript:事件对象兼容源代码

JavaScript:兼容不同浏览器的事件对象


对于DOM和IE中的event对象来说,功能相似但获取的方式不同,因此我们可以通过EventUtil对象加以增添,使两者获取各自兼容的方法。

var EventUtil = {
    //增加监听事件
    addHandler: function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent("on" + type,handler)
        }else{
            element["on" + type] = handler;
        }
    },
    //删除监听事件
    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){
        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){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    },
    //获取相关元素
    getRelatedTarget:function(event){
       	if(event.relatedTarget){
            return event.relatedTarget
        }else if(event.toElement){
            return event.toElement;
        }else if(event.fromELement){
            return event.fromElement;
        }else{
            return null;
        }
    },
    // 获取鼠标按钮
    getButton:function(){
        if(document.implementation.hasFeature("MouseEvents","2.0")){
            return event.button;
        }else{
            switch(event.button){
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                    return 0;
                case 2:
                case 6:
                    return 2;
                case 4:
                    return 1;
            }
        }
    },
    // 获取鼠标滚轮增值
    getWheelDalta: function(event){
        if(event.wheelDalta){
            return (client.engine.opera && client.engine.opera < 9.5 ?
                   -event.wheelDelta : event.wheelDelta)
        }else{
            return -event.detail*40;
        }
    },
    // 获取charcode
    getCharCode:function(event){
    	if(typeof event.charCode == "number"){
    		return event.charCode;
    	}else{
    	return event.keyCode;
    },
    //获取剪切板数据
    getClipboardText:function(event){
        var clipboardData = (event.clipboardData || window.clipboardData);
        return clipboardData;
    },
    
    //修改剪切板数据
    setClipboardText:function(event){
        if(event.clipboardData){
            return event.clipboardData.setData("text/plain",value);
        }else if(window.clipboardData){
            return window.clipboardData.setData("text",value);
        }
    },
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值