封装常用的跨浏览器的事件对象EventUtil

前言

今天主要讲解一个常用的js封装的事件方法！很常用，因此在博客中写一下！前面讲了jquery属性的相关js实现方法，假如我们在项目中，不用jquery，那么这个事件一般我们都会用到！其次，今天我会讲讲一些表单知识，很简单，但是可能有些不常用的，就会不是很了解！

跨浏览器的事件对象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) {//获取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) {//阻止事件流，阻止事件冒泡
        if(event.stopPropagation) {
            event.stopPropagation();
        }else {
            event.cancelBubble = true;
        }
    },
    getRelatedTarget: function(event){//返回相关元素信息（仅对于mouseover和mouseout事件）
        if (event.relatedTarget){
            return event.relatedTarget;
        } else if (event.toElement){
            return event.toElement;
        } else if (event.fromElement){
            return event.fromElement;
        } else {
            return null;
        }
    },
    getWheelDelta: function(event) {//获取鼠标滚轮增量值，检测是否包含WheelDelta
        if(event.wheelDelta) {
            return event.wheelDelta;
        }else {
            return -event.detail * 40
        }
    },
    getCharCode: function(event) {//获取键盘按键键码。
        if(typeof event.charCode == 'number') {
            return event.charCode;
        }else {
            return event.keyCode;
        }
    },
    getButton:function(event){//在mouseup或者mousedown的时候，event存在一个button属性，用于判断是按了鼠标左键，右键，还是中键，0鼠标主键按钮，1是中间，2是次键（右键）
        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;

            }
        }

    }
};

上面就是我们封装的事件对象。

用法超级简单，例如click事件

var btn1 = document.getElementById("myBtn1");
var handler = function(){
alert("hello haorooms");
}

EventUtil.addHandler(btn1, "click", handler);
//EventUtil.removeHandler(btn1, "click", handler);