事件的封装

//跨浏览器封装
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;
        }
    },
     getCharCode:function(event){
          if(typeof event.charCode =='number'){
               return event.charCode;
          }else{
               return event.keyCode;
          }
     },
     getWheelDelta: function(event){
          if(event.wheelDelta){
               return (client.engine.opera&&client.engine.opera<9.5? -event.wheelDelta:event.wheelDelta);
          }else{
               return -event.detail * 40;
          }
     },
     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(event) {
         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;
             }
         }
     },
     getClipboardText: function(event) {
         var clipboardData = (event.clipboardData || window.clipboardData);
         return clipboardData.getData("text");
     },
     setClipboardText: function(event, value) {
         if (event.clipboardData) {
             return event.clipboardData.setData("text/plain", value);
         } else if (window.clipboardData) {
             return window.clipboardData.setData("text", value);
         }
     }
};
//使用方法:
element.click = function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
EventUtil.stopPropagation(event);
}

var divs = document.getElementsByTagName('div');
EventUtil.addHandler(divs[0],'click',handler1,false);
function handler1(){
     alert(this);//这里的this要当心,在ie下是window这个对象,其他情况下是当前元素
}
EventUtil.addHandler(divs[0],'click',handler3,false);
function handler3(){
     alert('hello');
}

EventUtil.addHandler(text[0],'keypress',function(event){
     var event = EventUtil.getEvent(event);
     var charCode = EventUtil.getCharCode(event);
     if(!/[a-zA-Z]/.test(String.fromCharCode(charCode)) && charCode>9){
          EventUtil.preventDefault(event);
     }
});
EventUtil.addHandler(text[0],'paste',function(event){
     var event = EventUtil.getEvent(event);
     var text = EventUtil.getClipboardText(event);
     console.info(text);
     if(!/^\d*$/.test(text)){
          EventUtil.preventDefault(event);
     }
});
EventUtil.addHandler(text[0],'copy',function(event){
     var event = EventUtil.getEvent(event);
     EventUtil.preventDefault(event);
});
                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值