前言

封装一个能够兼容多浏览器的 JavaScript 库 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;
        }
    },
    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;
        }
    },
    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;
        }
    },
    stopPropagation:function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble=true;
        }
    },
    getCharCode:function(event){
        if(typeof event.charCode=="number"){//在不支持的浏览器中值是undefined
            return event.charCode;
        }else{
            return event.keyCode;
        }    
    }
};

为保证处理事件的代码在大多数浏览器下一致运行，只需要关注冒泡阶段。

每部分功能使用

添加事件： addHandler

var elem = document.getElementById('elemId');
EventUtil.addHandler(elem,'click',function(){ });

移除事件： removeHandler

var elem = document.getElementById('elemId');
EventUtil.removeHandler(elem,'click',function(){ });

需要和 addHandler 参数一致；还有，匿名函数无法移除！

获取事件对象： getEvent

var elem = document.getElementById('elemId');
elem.onclick=function(event){
    event=EventUtil.getEvent(event);//这行代码添加到开头，确保随时可以使用event对象，不必担心用户使用的什么浏览器
    //....这里随时可以使用event对象
};

获取目标元素： getTarget

var elem = document.getElementById('elemId');
elem.onclick=function(event){
    event=EventUtil.getEvent(event);
    var target=EventUtil.getTarget(event);
};

取消事件默认行为： preventDefault

var elem = document.getElementById('elemId');
elem.onclick=function(event){
    event=EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
};

阻止事件冒泡： stopPropagation

var elem = document.getElementById('elemId');
elem.onclick=function(event){
    event=EventUtil.getEvent(event);
    EventUtil.stopPropagation(event);//阻止事件冒泡
}

document.body.onclick=function(event){ // 这个事件不会触发
    alert("Body clicked");
}

获取字符编码： getCharCode

var elem = document.getElementById('elemId');
elem.onclick=function(event){
    event=EventUtil.getEvent(event);
    console.log( EventUtil.getCharCode(event) );//获取字符编码
}